Element:滚轮事件

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

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

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

语法

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

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

onwheel = (event) => {};

事件类型

事件属性

此接口从父接口:MouseEventUIEventEvent 继承属性。

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

参见