Элемент: событие wheel

Событие wheel срабатывает, когда пользователь вращает колесико указательного устройства (обычно мыши). Оно также срабатывает для связанных устройств, которые имитируют действия колесика, таких как трекпады и шарики мыши.

Это событие заменяет нестандартное устаревшее событие mousewheel.

Не путайте событие wheel со событием scroll:

• Событие wheel не обязательно вызывает событие scroll. Например, элемент может быть полностью не прокручиваемым. Действия масштабирования с помощью колесика или трекпада также вызывают события wheel.
• Событие scroll не обязательно вызывается событием wheel. Элементы также могут быть прокручены с помощью клавиатуры, перетаскивания полосы прокрутки или с помощью JavaScript.
• Даже когда событие wheel вызывает прокрутку, значения delta* в событии wheel не обязательно отражают направление прокрутки содержимого.

Поэтому не полагайтесь на свойства wheel события delta* для определения направления прокрутки. Вместо этого определять изменения значений scrollLeft и scrollTop целевого элемента в событии scroll.

Событие wheel может быть отменено. Если событие отменено, прокрутка или масштабирование не выполняются. Это может привести к проблемам производительности, так как браузеру нужно подождать обработки каждого события wheel, прежде чем фактически прокрутить содержимое. Этого можно избежать, установив passive: true при вызове addEventListener(), что может привести к тому, что браузер сгенерирует неотменяемые события wheel.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

addEventListener("wheel", (event) => {});

onwheel = (event) => {};

A WheelEvent. Наследует от MouseEvent, UIEvent и Event.

Этот интерфейс наследует свойства от своих предков, MouseEvent, UIEvent и Event.

WheelEvent.deltaX Только для чтения

Возвращает значение double, представляющее горизонтальное количество прокрутки.

WheelEvent.deltaY Только для чтения

Возвращает значение double, представляющее вертикальное количество прокрутки.

WheelEvent.deltaZ Только для чтения

Возвращает значение double, представляющее количество прокрутки по оси z.

WheelEvent.deltaMode Только для чтения

Возвращает значение unsigned long, представляющее единицу измерения значений прокрутки delta*. Допустимые значения:

Постоянная	Значение	Описание
WheelEvent.DOM_DELTA_PIXEL	0x00	Значения delta* указаны в пикселях.
WheelEvent.DOM_DELTA_LINE	0x01	Значения delta* указаны в строках. Каждый щелчок мыши прокручивает строку содержимого, где способ расчета высоты строки зависит от браузера.
WheelEvent.DOM_DELTA_PAGE	0x02	Значения delta* указаны в страницах. Каждый щелчок мыши прокручивает страницу содержимого.

WheelEvent.wheelDelta Только для чтения Устаревшее

Возвращает целое число (32 бита), представляющее расстояние в пикселях.

WheelEvent.wheelDeltaX Только для чтения Устаревшее

Возвращает целое число, представляющее горизонтальное количество прокрутки.

WheelEvent.wheelDeltaY Только для чтения Устаревшее

Возвращает целое число, представляющее вертикальное количество прокрутки.

Этот пример показывает, как масштабировать элемент с помощью колесика мыши (или другого указательного устройства).

<div>Scale me with your mouse wheel.</div>

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}

function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restrict scale
  scale = Math.min(Math.max(0.125, scale), 4);

  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;

Обработчик событий также может быть настроен с помощью метода addEventListener():

el.addEventListener("wheel", zoom, { passive: false });

• WheelEvent