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

правити

Порада

При deltaMode = 2, будьте обережні, оскільки прокручування на цілу сторінку може бути надто грубим для дрібніших інтерфейсів. Це налаштування добре підходить для додатків, де потрібне швидке переміщення між великими розділами або сторінками.

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

Порада

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

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

Порада

Для тестування різних значень deltaMode, спробуйте використати віртуальні пристрої або інструменти емуляції, які дозволяють задавати нестандартні налаштування прокручування. Це дасть можливість побачити, як ваш додаток поводиться при різних типах прокручування.

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

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

Синтаксис

wheelEvent.deltaMode

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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('Прокручуємо цілу сторінку');
    // Прокрутка на цілу сторінку
  }
});

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);
});