JS властивість Event.deltaX
Загальний опис
deltaX – це властивість об’єкта події WheelEvent, яка повертає значення горизонтального зсуву під час прокручування. Ця величина виражається в пікселях і вказує на те, наскільки сильно користувач прокрутив колесо миші або тачпад у горизонтальному напрямку. Позитивні значення вказують на прокручування вправо, а негативні – вліво.
Зазвичай, deltaX використовується для визначення горизонтальної прокрутки, що може бути корисно для створення інтерактивних елементів, таких як горизонтальні галереї або каруселі зображень, які реагують на горизонтальне прокручування миші. У багатьох браузерах прокрутка може підтримувати як вертикальний, так і горизонтальний напрямок, і deltaX дозволяє розділити ці дії. Щоб отримати значення deltaX, достатньо обробити подію wheel на елементі або на всій сторінці.
Ось приклад обробки події wheel, де значення deltaX використовується для відстеження горизонтального зсуву:
document.addEventListener('wheel', function(event) {
console.log('Горизонтальний зсув:', event.deltaX);
});
В цьому прикладі значення deltaX виводиться у консоль під час кожного прокручування. Це дає змогу розуміти, чи користувач виконує горизонтальну прокрутку і з якою швидкістю. Важливо врахувати, що deltaX працює в залежності від налаштувань пристрою, тож значення може варіюватися в залежності від платформи чи типу пристрою. Наприклад, деякі тачпади можуть мати вищу чутливість до горизонтального прокручування, ніж звичайні миші.
deltaX можна використовувати для адаптації інтерфейсу, який реагує на горизонтальні жести користувача. Це зокрема може бути корисним для оптимізації навігації на мобільних пристроях, де прокрутка є основним способом взаємодії. Варто також врахувати, що ця властивість може бути використана спільно з deltaY та deltaZ, щоб отримати повну інформацію про напрямок і величину прокручування у всіх трьох напрямках.
| Порада: |
|
| Порада: | При тестуванні зображень чи елементів, що прокручуються горизонтально, варто додати перевірку на |
| Порада: | Не використовуйте |
Синтаксис
wheelEvent.deltaXЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
31 |
17 |
8 |
18 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4.3 |
31 |
17 |
8 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі використовується deltaX для прокручування елементів каруселі в горизонтальному напрямку. При цьому preventDefault() зупиняє стандартну поведінку прокрутки, що дозволяє плавно керувати каруселлю за допомогою горизонтального прокручування.
const carousel = document.querySelector('.carousel');
carousel.addEventListener('wheel', function(event) {
event.preventDefault(); // Забороняємо стандартну прокрутку
carousel.scrollLeft += event.deltaX; // Прокручуємо горизонтально
});Цей приклад показує, як використовувати deltaX для прокручування галереї з динамічною швидкістю. Значення прокручування масштабується для контролю швидкості переміщення. Це дозволяє створити чутливий інтерфейс, що враховує силу прокручування для зручності користувача.
const gallery = document.querySelector('.gallery');
gallery.addEventListener('wheel', function(event) {
const speed = 5; // Фактор масштабування для регулювання швидкості
gallery.scrollLeft += event.deltaX * speed;
});