Element：滚轮事件

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

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

语法

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

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

onwheel = (event) => {};

事件类型

WheelEvent。继承自 Event。

Event UIEvent MouseEvent WheelEvent

事件属性

此接口从父接口：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;
}
js
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() 方法来设置：

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

规范

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

浏览器兼容性

BCD tables only load in the browser

参见