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, щоб отримати повну інформацію про напрямок і величину прокручування у всіх трьох напрямках.

правити

Порада

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

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

Порада

При тестуванні зображень чи елементів, що прокручуються горизонтально, варто додати перевірку на deltaX, щоб реагувати лише на горизонтальну прокрутку. Це допоможе уникнути конфліктів з вертикальною прокруткою.

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

Порада

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

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

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

Синтаксис

wheelEvent.deltaX

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div class="carousel">перший елемент carousel</div>
<div class="carousel">другий елемент carousel</div>

const carousel = document.querySelector('.carousel');
carousel.addEventListener('wheel', function(event) {
  event.preventDefault(); // Забороняємо стандартну прокрутку
  carousel.scrollLeft += event.deltaX; // Прокручуємо горизонтально
});

<div class="gallery">перший елемент gallery</div>
<div class="gallery">другий елемент gallery</div>

const gallery = document.querySelector('.gallery');
gallery.addEventListener('wheel', function(event) {
  const speed = 5; // Фактор масштабування для регулювання швидкості
  gallery.scrollLeft += event.deltaX * speed;
});