JS властивість Event.deltaMode
Загальний опис
deltaMode – це властивість об'єкта WheelEvent, яка визначає одиницю вимірювання для значень deltaX, deltaY та deltaZ. Властивість deltaMode може мати три можливі значення: 0 (DOM_DELTA_PIXEL), 1 (DOM_DELTA_LINE) або 2 (DOM_DELTA_PAGE). Ці значення відповідають тому, як інтерпретувати одиниці вимірювання для змінних deltaX, deltaY та deltaZ під час прокручування.
Якщо deltaMode дорівнює 0, значення вимірюються у пікселях, що найчастіше використовується для точного контролю над прокручуванням на екрані. Значення 1 означає, що одиницею є рядок, що дозволяє легко реалізувати прокручування, наприклад, у текстових полях або списках. Якщо deltaMode дорівнює 2, зміщення відбувається на рівні сторінки, що може бути корисним для великих областей прокручування, таких як цілі сторінки.
Приклад використання deltaMode для визначення, в яких одиницях вимірюється прокрутка:
document.addEventListener('wheel', function(event) {
switch(event.deltaMode) {
case 0:
console.log('Прокрутка вимірюється в пікселях');
break;
case 1:
console.log('Прокрутка вимірюється в рядках');
break;
case 2:
console.log('Прокрутка вимірюється в сторінках');
break;
}
});
Цей приклад допомагає визначити одиницю вимірювання під час прокручування, що дозволяє адаптувати поведінку додатку в залежності від типу пристрою або налаштувань прокручування. Наприклад, для мишей прокручування, як правило, відбувається у пікселях, а для клавіатурних подій – у рядках або сторінках. deltaMode також є корисною властивістю для розробників, які працюють з кросплатформенними застосунками або адаптують веб-контент для різних пристроїв.
| Порада: | При |
| Порада: | Якщо |
| Порада: | Для тестування різних значень |
Синтаксис
wheelEvent.deltaModeЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
31 |
17 |
8 |
18 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4.3 |
31 |
17 |
8 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад створює прокручувану область, у якій користувач може бачити поточний режим deltaMode та значення deltaX, deltaY, і deltaZ під час скролінгу. deltaMode дозволяє адаптуватися до різних налаштувань пристрою введення, що корисно для точної обробки скролінгу у користувацьких інтерфейсах.
У цьому прикладі значення deltaY нормалізується відповідно до deltaMode, щоб адаптувати прокручування в пікселях для різних типів пристроїв і одиниць вимірювання. Це допомагає зробити прокручування більш уніфікованим.
document.addEventListener('wheel', function(event) {
let normalizedDelta;
if (event.deltaMode === 1) {
normalizedDelta = event.deltaY * 40; // множимо на 40 для адаптації під пікселі
} else if (event.deltaMode === 2) {
normalizedDelta = event.deltaY * 800; // множимо на 800 для сторінкової прокрутки
} else {
normalizedDelta = event.deltaY; // значення в пікселях
}
console.log('Нормалізоване значення прокручування:', normalizedDelta);
});Цей приклад використовує deltaMode для визначення типу прокрутки і змінює поведінку залежно від режиму. Це дозволяє створити адаптивний інтерфейс, який відповідає на різні типи прокручування, такі як прокручування мишею, клавіатурою або іншими пристроями.
document.addEventListener('wheel', function(event) {
if (event.deltaMode === 0) {
console.log('Прокручуємо елемент плавно по пікселях');
// Виконати плавну прокрутку
} else if (event.deltaMode === 1) {
console.log('Прокручуємо на кілька рядків');
// Прокрутка з проміжками між рядками
} else if (event.deltaMode === 2) {
console.log('Прокручуємо цілу сторінку');
// Прокрутка на цілу сторінку
}
});