JS властивість Event.wheel

Загальний опис

Подія wheel спрацьовує при прокручуванні колеса миші або використанні трекпада. Ця подія надає програмісту можливість реагувати на прокрутку в будь-якому напрямку: вертикально або горизонтально. Вона може бути корисною для створення кастомних інтерфейсів або покращення стандартної прокрутки на сторінці, наприклад, зміни масштабу контенту або керування анімаціями.

Щоб використовувати подію wheel, можна додати обробник події до елемента:

const element = document.querySelector('#scrollable');
element.addEventListener('wheel', (event) => {
  console.log(`Прокручено на: ${event.deltaY}`);
});

Об'єкт події wheel містить кілька важливих властивостей, які можна використовувати для аналізу прокрутки. Наприклад, deltaY показує величину вертикальної прокрутки (від'ємне значення вказує на прокрутку вгору, додатне — вниз). deltaX відповідає за горизонтальну прокрутку.

За допомогою події wheel можна також керувати поведінкою сторінки при прокручуванні. Наприклад, щоб блокувати стандартну прокрутку сторінки, можна використовувати event.preventDefault():

element.addEventListener('wheel', (event) => {
  event.preventDefault();  // Блокує стандартну прокрутку
  // Кастомна логіка
});

Якщо необхідно збільшити чи зменшити чутливість до прокрутки, можна використовувати значення event.deltaMode. Наприклад, якщо deltaMode дорівнює 0, прокрутка здійснюється у пікселях, тоді як інші значення можуть означати прокрутку по рядках або сторінках.

Подію wheel часто використовують для масштабування контенту або керування кастомними ефектами прокрутки, зокрема для інтерактивних сторінок, слайдерів та інших елементів з унікальними інтерфейсними рішеннями.

правити

Порада

Майте на увазі, що подія wheel може спрацьовувати дуже часто (кілька разів на секунду). Якщо виконуєте важкі операції при прокручуванні, використовуйте техніки оптимізації, такі як дебаунсинг або тротлінг.

автор: Bond правити

Порада

Подія wheel надає можливість не тільки реагувати на прокрутку мишею, але й на подібні жести на трекпадах. Переконайтесь, що ваша логіка коректно працює для обох типів пристроїв.

автор: Bond правити

Порада

Використовуйте event.deltaX і event.deltaY для розрізнення вертикальної та горизонтальної прокрутки, особливо якщо ви працюєте з контентом, що може прокручуватись в обох напрямках, як у випадку зі слайдерами або складними макетами.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('wheel', function(event) {
  // Дії при прокручуванні
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	31	17	7	18	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4.3	31	17	—

Приклади

+ запропонувати свій приклад у пісочниці

<div id="zoomable">Демонстраційний елемент</div>

const zoomableElement = document.querySelector('#zoomable');
let scale = 1;

zoomableElement.addEventListener('wheel', (event) => {
  event.preventDefault();
  scale += event.deltaY * -0.01;  // Збільшуємо або зменшуємо масштаб
  scale = Math.min(Math.max(.125, scale), 4);  // Обмежуємо масштаб
  zoomableElement.style.transform = `scale(${scale})`;
});

<div id="scroller" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

const horizontalScroller = document.querySelector('#scroller');

horizontalScroller.addEventListener('wheel', (event) => {
  event.preventDefault();
  horizontalScroller.scrollLeft += event.deltaY;  // Прокручуємо горизонтально замість вертикальної прокрутки
});