JS властивість Event.deltaZ

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

deltaZ – це властивість об’єкта події WheelEvent, яка повертає величину зсуву по осі Z під час прокручування. У більшості випадків значення deltaZ залишається 0, оскільки стандартні пристрої вводу, такі як миші та тачпади, підтримують лише дві осі прокручування: горизонтальну (deltaX) і вертикальну (deltaY). Власне, deltaZ зазвичай використовується на спеціальних пристроях вводу, таких як 3D миші, де може бути доступна і третя вісь.

Підтримка deltaZ досить обмежена, і в стандартному середовищі браузера її використання мінімальне. Проте, для додаткових функцій, таких як маніпуляції у тривимірному просторі або специфічні інтерактивні застосунки, де ввод може відбуватися у всіх трьох вимірах, deltaZ стає актуальною властивістю. Використання deltaZ може бути необхідним, якщо додаток підтримує специфічні маніпуляції об'єктами у 3D середовищах.

Приклад використання deltaZ для відстеження зсуву по осі Z:

document.addEventListener('wheel', function(event) {
  if (event.deltaZ !== 0) {
    console.log('Зсув по осі Z:', event.deltaZ);
  }
});

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

правити

Порада

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

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

Порада

Для простоти, коли deltaZ використовується рідко, ви можете ігнорувати її або використовувати лише для обробки винятків. Наприклад, можна просто не враховувати deltaZ для більшості стандартних маніпуляцій.

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

Порада

Щоб протестувати, використовуйте віртуальні пристрої або емулятори, які підтримують 3D прокрутку. Це дозволить уникнути залежності від рідкісних фізичних пристроїв при налагодженні вашого коду.

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

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

Синтаксис

event.deltaZ

Переглядачі

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

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

Переглядач
	26	17	7	15	12

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

Переглядач
	4.4	26	17	7

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

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

Приклади

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

let scaleZ = 1;
document.addEventListener('wheel', function(event) {
  if (event.deltaZ !== 0) {
    scaleZ += event.deltaZ * 0.01;
    console.log('Масштабування по осі Z:', scaleZ);
  }
});

let positionZ = 0;
document.addEventListener('wheel', function(event) {
  if (event.deltaZ !== 0) {
    positionZ += event.deltaZ * 0.1;
    console.log('Поточна позиція по осі Z:', positionZ);
  }
});