Использование события wheel в JavaScript

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

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

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

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) размер шрифта увеличивается

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

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' });
});

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