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 часто використовують для масштабування контенту або керування кастомними ефектами прокрутки, зокрема для інтерактивних сторінок, слайдерів та інших елементів з унікальними інтерфейсними рішеннями.
| Порада: | Майте на увазі, що подія |
| Порада: | Подія |
| Порада: | Використовуйте |
Синтаксис
element.addEventListener('wheel', function(event) {
// Дії при прокручуванні
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може змінювати розмір зображення за допомогою прокручування миші. При кожному прокручуванні подія wheel коригує масштаб зображення, збільшуючи або зменшуючи його. Масштаб обмежений в межах від 0.5x до 3x для запобігання надто великих або малих значень. Кнопка "Скинути масштаб" дозволяє швидко повернутися до початкового значення масштабу (1x).
У цьому прикладі обробник події wheel використовується для зміни масштабу елемента. Прокрутка вниз збільшує масштаб, а прокрутка вгору зменшує його. Це корисно для реалізації кастомного масштабування зображень або інших елементів на сторінці.
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})`;
});Цей приклад показує, як перетворити вертикальну прокрутку на горизонтальну. Використовується значення event.deltaY для управління горизонтальною прокруткою елемента. Це може бути корисним для горизонтальних галерей або слайдерів, де користувачі можуть прокручувати вміст мишею або трекпадом.
const horizontalScroller = document.querySelector('#scroller');
horizontalScroller.addEventListener('wheel', (event) => {
event.preventDefault();
horizontalScroller.scrollLeft += event.deltaY; // Прокручуємо горизонтально замість вертикальної прокрутки
});