Element：滚轮事件

滚轮（wheel）事件会在滚动鼠标滚轮或操作其他类似输入设备时触发。

滚轮事件取代了已被弃用的非标准 mousewheel 事件。

备注： 不要将滚轮事件与 scroll 事件混淆。滚轮事件的默认行为是取决于实现的，所以不一定会触发 scroll 事件。即便如此，滚轮事件的 delta* 值也不一定能反映文档内容的实际滚动方向。因此，请不要依赖滚轮事件的 delta* 值来获得滚动方向。请通过检测目标的 scroll 事件的 scrollLeft 和 scrollTop 这两个值代替。

语法

在 addEventListener() 方法中使用事件名称，或设置事件处理器属性。

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

onwheel = (event) => {};

事件类型

WheelEvent。继承自 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 只读已弃用

返回一个整型数，表示垂直滚动量。

示例

通过滚轮缩放元素

此示例展示了如何使用鼠标（或其他定点设备）滚轮缩放元素。

html

<div>使用鼠标滚轮来进行缩放</div>

css

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 的等价形式

上面的事件处理器也可以通过 addEventListener() 方法来设置：

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

规范

Specification
UI Events # event-type-wheel
HTML Standard # handler-onwheel

浏览器兼容性

BCD tables only load in the browser

参见

WheelEvent
Document：wheel 事件