JS властивість Array.deltaY

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

deltaY – це властивість об’єкта події WheelEvent, яка повертає значення вертикального зсуву під час прокручування. Значення виражене в пікселях і вказує на те, наскільки сильно користувач прокрутив колесо миші або тачпад у вертикальному напрямку. Позитивні значення показують, що прокрутка була вниз, а негативні – вгору.

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

Щоб отримати значення deltaY, потрібно обробити подію wheel, яка може бути застосована до конкретного елемента або до всієї сторінки. Ось простий приклад використання deltaY для виведення величини прокрутки в консоль:

document.addEventListener('wheel', function(event) {
  console.log('Вертикальний зсув:', event.deltaY);
});

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

правити

Порада

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

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

Порада

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

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

Порада

Щоб обмежити прокручування на певній ділянці сторінки, можна використовувати event.preventDefault() і deltaY разом. Це дозволить уникнути прокручування всієї сторінки і контролювати його лише в межах обраного елемента.

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

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

Синтаксис

wheelEvent.deltaY

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="resizable">Демонстраційний елемент</div>

const resizableDiv = document.getElementById('resizable');
let height = 100;

resizableDiv.addEventListener('wheel', function(event) {
  event.preventDefault();
  height += event.deltaY * 0.5;
  height = Math.max(50, Math.min(500, height)); // Встановлюємо межі для висоти
  resizableDiv.style.height = `${height}px`;
});

<div id="zoomBox">Демонстраційний елемент</div>

const box = document.getElementById('zoomBox');
let scale = 1;

window.addEventListener('wheel', function(event) {
  event.preventDefault(); // Забороняємо стандартну прокрутку
  scale += event.deltaY * -0.01; // Контролюємо масштаб на основі deltaY
  scale = Math.min(Math.max(0.5, scale), 2); // Обмежуємо масштаб
  box.style.transform = `scale(${scale})`;
});