JS властивість Array.deltaY
Загальний опис
deltaY – це властивість об’єкта події WheelEvent, яка повертає значення вертикального зсуву під час прокручування. Значення виражене в пікселях і вказує на те, наскільки сильно користувач прокрутив колесо миші або тачпад у вертикальному напрямку. Позитивні значення показують, що прокрутка була вниз, а негативні – вгору.
Зазвичай deltaY використовується для визначення вертикальної прокрутки, що може бути корисно для адаптації веб-сторінок під час взаємодії з користувачем, особливо коли необхідно контролювати або обмежити прокручування певного елемента. Прикладами є ситуації, коли потрібно забезпечити плавну прокрутку або зупинити її на певному рівні. deltaY також може працювати разом з іншими властивостями, такими як deltaX, для створення повної картини прокрутки.
Щоб отримати значення deltaY, потрібно обробити подію wheel, яка може бути застосована до конкретного елемента або до всієї сторінки. Ось простий приклад використання deltaY для виведення величини прокрутки в консоль:
document.addEventListener('wheel', function(event) {
console.log('Вертикальний зсув:', event.deltaY);
});
У цьому прикладі значення deltaY буде відображатися під час кожної події прокрутки, що дає змогу відстежувати напрямок і величину вертикального зсуву. Різні пристрої, такі як миші або тачпади, можуть повертати різні значення для deltaY, тому часто використовують нормалізацію або додаткову обробку, щоб значення були уніфікованими між різними платформами. Це допомагає забезпечити стабільний досвід користувача незалежно від того, яким пристроєм він користується.
| Порада: | Для ефектів, що залежать від прокручування, часто доцільно перевіряти не лише значення |
| Порада: |
|
| Порада: | Щоб обмежити прокручування на певній ділянці сторінки, можна використовувати |
Синтаксис
wheelEvent.deltaYЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
31 |
17 |
8 |
18 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4.3 |
31 |
17 |
8 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад використовується для збільшення або зменшення масштабу елемента за допомогою вертикального прокручування. deltaY допомагає визначити напрямок і швидкість зміни масштабу. Це може бути корисним для створення інтерактивних графіків або зображень, які масштабуються при прокручуванні.
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})`;
});У цьому прикладі ми використовуємо deltaY для зміни висоти елемента під час прокручування. Висота змінюється в межах встановлених значень, забезпечуючи контрольований ефект. Це може бути застосовано для інтерактивних елементів інтерфейсу, таких як панелі, які змінюються на основі дій користувача.
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`;
});