JS об'єкт Wheel
Загальний опис
Wheel Events — це події, які з'являються при прокручуванні елемента за допомогою колеса миші або сенсорного екрана. Вони можуть бути використані для реалізації функціоналу прокручування в інтерфейсах, масштабування, навігації по сторінках, а також для створення інтерактивних ефектів.
Щоб обробити події прокручування, використовується подія 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();
// Ваш код для прокручування
});
| Порада: | Коли використовуєте подію |
| Порада: | Щоб реалізувати масштабування контенту за допомогою колеса миші, можна комбінувати події прокручування з коригуванням розмірів елементів. Наприклад, якщо користувач прокручує колесо вгору, ви можете збільшити шрифт тексту на сторінці, а якщо вниз — зменшити. Використовуйте |
| Порада: | Використання |
Синтаксис
element.addEventListener('wheel', function(event) {
// Ваш код
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
17 |
3 |
15 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
17 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад демонструє, як за допомогою події wheel можна динамічно змінювати колір фону елемента при прокручуванні миші. Користувач може побачити, як фон змінюється на випадкові кольори, а також оновлюються координати прокручування (по осях X і Y). Це дозволяє інтерактивно взаємодіяти з елементами на сторінці, покращуючи користувацький досвід при прокручуванні.
Цей код дозволяє користувачам змінювати масштаб всього контенту на сторінці, використовуючи колесо миші. Це може бути корисно для динамічної зміни вигляду сторінки, наприклад, для масштабування карт чи великих зображень.
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})`;
});Цей приклад використовує події wheel, щоб плавно прокручувати сторінку вгору або вниз при використанні колеса миші, забезпечуючи користувачу зручний спосіб навігації без різких стрибків.
let lastScroll = 0;
document.addEventListener('wheel', function(event) {
if (event.deltaY > 0) {
lastScroll += 100; // плавне переміщення вниз
} else {
lastScroll -= 100; // плавне переміщення вгору
}
window.scrollTo({
top: lastScroll,
behavior: 'smooth'
});
});Методи
Властивості
deltaX- Визначає переміщення по осі X. Якщо колесо миші прокручується горизонтально, ця властивість покаже значення, яке вказує на величину руху.
deltaY- Визначає переміщення по осі Y. Це значення використовується для вертикального прокручування, наприклад, при прокручуванні сторінки вгору або вниз.
shiftKey- Показує, чи натиснута клавіша Shift під час прокручування.
deltaMode- Параметр, що показує одиниці вимірювання для `deltaX` і `deltaY`. Це може бути пікселі, лінії або сторінки.