JS об'єкт WheelEvent

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

WheelEvent — це події, які з'являються при прокручуванні елемента за допомогою колеса миші або сенсорного екрана. Вони можуть бути використані для реалізації функціоналу прокручування в інтерфейсах, масштабування, навігації по сторінках, а також для створення інтерактивних ефектів.

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

document.addEventListener('wheel', function(event) {
    console.log('Вісь X:', event.deltaX);
    console.log('Вісь Y:', event.deltaY);
    console.log('Масштаб:', event.deltaMode);
});

Приклад обробки події:

document.addEventListener('wheel', function(event) {
    if (event.deltaY > 0) {
        console.log('Прокручено вниз');
    } else {
        console.log('Прокручено вгору');
    }
});

Також можна запобігти стандартному поведінці прокручування, викликавши метод preventDefault() в обробнику події. Це буде корисно, якщо ви хочете реалізувати власне прокручування:

document.addEventListener('wheel', function(event) {
    event.preventDefault();
    // Ваш код для прокручування
});

правити

Порада

Коли використовуєте подію wheel, звертайте увагу на те, як різні браузери обробляють величину прокручування. Це може бути особливо важливо для кросбраузерної сумісності. Якщо ви хочете забезпечити однакову поведінку в усіх браузерах, потрібно нормалізувати значення deltaY. Наприклад, ви можете використовувати множення на певний коефіцієнт, щоб спростити варіативність величини прокручування.

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

Порада

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

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

Порада

Використання event.deltaMode допомагає визначити одиниці вимірювання величини прокручування. Зазвичай для прокручування використовується одиниця "пікселі", але можуть бути й інші значення. Це важливо, коли потрібно стандартизувати поведінку прокручування на різних пристроях.

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

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

Синтаксис

element.addEventListener('wheel', function(event) {
    // Ваш код
});

властивості

Переглядачі

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

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

Переглядач
	1	17	3	15	12

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

Переглядач
	37	18	17	1

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

Переглядач
	-	-

Приклади

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

let lastScroll = 0;
document.addEventListener('wheel', function(event) {
    if (event.deltaY > 0) {
        lastScroll += 100;  // плавне переміщення вниз
    } else {
        lastScroll -= 100;  // плавне переміщення вгору
    }
    window.scrollTo({
        top: lastScroll,
        behavior: 'smooth'
    });
});

let scale = 1;
document.addEventListener('wheel', function(event) {
    if (event.deltaY < 0) {
        scale += 0.1;  // збільшення
    } else {
        scale -= 0.1;  // зменшення
    }
    document.body.style.transform = `scale(${scale})`;
});