логотип PurpleSchool
логотип PurpleSchool

Событие wheel в JavaScript

Автор

Дмитрий Нечаев

Событие wheel в JavaScript возникает, когда пользователь крутит колесо мыши. Это событие позволяет создавать интерактивные эффекты и управлять поведением веб-страницы в зависимости от действий пользователя. В этой статье мы рассмотрим, как работает событие wheel, когда его следует использовать, и приведем примеры его применения.

Как работает событие "wheel"?

Событие wheel возникает, когда пользователь крутит колесо мыши вверх или вниз. Это событие может быть использовано для реагирования на прокрутку колеса мыши и выполнения определенных действий в ответ на это действие.

Примеры использования события "wheel"

Изменение размера шрифта при прокрутке колеса мыши

document.addEventListener('wheel', function(event) {
    // Получаем значение величины прокрутки колеса мыши
    const delta = event.deltaY;

    // Увеличиваем или уменьшаем размер шрифта в зависимости от направления прокрутки
    if (delta > 0) {
        document.body.style.fontSize = '14px';
    } else {
        document.body.style.fontSize = '18px';
    }
});

В этом примере при прокрутке колеса мыши вниз (положительное значение deltaY) размер шрифта уменьшается, а при прокрутке вверх (отрицательное значение deltaY) размер шрифта увеличивается.

Прокрутка галереи изображений при помощи колеса мыши

<div id="gallery">
    <img src="image1.jpg" alt="Изображение 1">
    <img src="image2.jpg" alt="Изображение 2">
    <img src="image3.jpg" alt="Изображение 3">
</div>
const gallery = document.getElementById('gallery');
let currentIndex = 0;

gallery.addEventListener('wheel', function(event) {
    // Получаем значение величины прокрутки колеса мыши
    const delta = event.deltaY;

    // Прокручиваем галерею изображений вверх или вниз
    if (delta > 0) {
        currentIndex++;
    } else {
        currentIndex--;
    }

    // Проверяем, чтобы индекс не выходил за границы количества изображений
    currentIndex = Math.min(Math.max(currentIndex, 0), gallery.children.length - 1);

    // Отображаем текущее изображение
    gallery.children[currentIndex].scrollIntoView({ behavior: 'smooth' });
});

В этом примере при прокрутке колеса мыши вниз (положительное значение deltaY) происходит переход к следующему изображению в галерее, а при прокрутке вверх (отрицательное значение deltaY) - к предыдущему изображению.

Особенности и рекомендации по использованию

  • Поддержка браузерами: Событие wheel широко поддерживается всеми современными браузерами.
  • Использование в сочетании с другими событиями: Событие wheel может быть использовано в сочетании с другими событиями, такими как scroll, для создания более сложных интерактивных эффектов.
  • Учет мобильных устройств: Некоторые мобильные устройства не имеют колеса прокрутки мыши, поэтому рекомендуется предусмотреть альтернативные способы взаимодействия для мобильных пользователей.

Заключение

Событие wheel в JavaScript позволяет реагировать на прокрутку колеса мыши пользователем и выполнять различные действия в зависимости от этого действия. Это полезный инструмент для создания интерактивных веб-приложений с возможностью управления поведением при помощи колеса мыши. Правильное использование события wheel может значительно улучшить пользовательский опыт и функциональность вашего веб-сайта или приложения.

Событие unload в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний