元素：滚轮事件

wheel 事件在用户旋转指向设备（通常是鼠标）上的滚轮按钮时触发。它也适用于模拟滚轮动作的相关设备，例如触控板和滚球。

此事件取代了非标准的已弃用 mousewheel 事件。

不要将 wheel 事件与 scroll 事件混淆

wheel 事件不一定派发 scroll 事件。例如，该元素可能完全不可滚动。使用滚轮或触控板进行缩放操作也会触发 wheel 事件。
scroll 事件不一定由 wheel 事件触发。元素也可以通过使用键盘、拖动滚动条或使用 JavaScript 来滚动。
即使 wheel 事件确实触发了滚动，wheel 事件中的 delta* 值也不一定反映内容的滚动方向。

因此，不要依赖 wheel 事件的 delta* 属性来获取滚动方向。相反，在 scroll 事件中检测目标的 scrollLeft 和 scrollTop 值的变化。

wheel 事件是可取消的。如果该事件被取消，则不会执行任何滚动或缩放操作。这可能会导致性能问题，因为浏览器必须等待每个滚轮事件完成处理才能真正滚动内容。您可以通过在调用 addEventListener() 时设置 passive: true 来避免这种情况，这可能会导致浏览器生成不可取消的 wheel 事件。

语法

在像 addEventListener() 这样的方法中使用事件名称，或者设置事件处理程序属性。

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

onwheel = (event) => {};

事件类型

一个 WheelEvent。它继承自 MouseEvent、UIEvent 和 Event。

事件属性

此接口从其祖先 MouseEvent、UIEvent 和 Event 继承属性。

WheelEvent.deltaX 只读

返回一个表示水平滚动量的 double 值。

WheelEvent.deltaY 只读

返回一个表示垂直滚动量的 double 值。

WheelEvent.deltaZ 只读

返回一个表示 z 轴滚动量的 double 值。

WheelEvent.deltaMode 只读

返回一个表示 delta* 值滚动单位的 unsigned long 值。允许的值为

常量	值	描述
`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>Scale me with your mouse wheel.</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 });

规范

规范
UI 事件 # event-type-wheel
HTML 标准 # handler-onwheel

浏览器兼容性

BCD 表只在启用了 JavaScript 的浏览器中加载。

另请参阅

WheelEvent