元素：wheel 事件
当用户旋转指向设备（通常是鼠标）上的滚轮按钮时，会触发 wheel 事件。对于模拟滚轮操作的相关设备，如触控板和轨迹球，也会触发此事件。
此事件取代了非标准已弃用的 mousewheel 事件。
请勿将 wheel 事件与 scroll 事件混淆
wheel事件不一定分发scroll事件。例如，元素可能根本无法滚动。使用滚轮或触控板的缩放操作也会触发wheel事件（ctrlKey设置为 true）。scroll事件不一定由wheel事件触发。元素也可以通过使用键盘、拖动滚动条或使用 JavaScript 来滚动。- 即使
wheel事件确实触发了滚动，wheel事件中的delta*值也不一定反映内容的滚动方向。
因此，不要依赖 wheel 事件的 delta* 属性来获取滚动方向。相反，请在 scroll 事件中检测目标元素的 scrollLeft 和 scrollTop 值的变化。
wheel 事件是可取消的。在某些浏览器中，序列中的第一个 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只读-
返回一个
unsigned long，表示delta*值滚动量的单位。允许的值是常量 值 描述 WheelEvent.DOM_DELTA_PIXEL0x00delta*值以像素为单位指定。WheelEvent.DOM_DELTA_LINE0x01delta*值以行为单位指定。每次鼠标点击都会滚动一行内容，其中用于计算行高的方法取决于浏览器。WheelEvent.DOM_DELTA_PAGE0x02delta*值以页为单位指定。每次鼠标点击都会滚动一页内容。 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: #ccddff;
padding: 5px;
}
let scale = 1;
const el = document.querySelector("div");
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})`;
}
el.onwheel = zoom;
addEventListener 等效
事件处理程序也可以使用 addEventListener() 方法设置
el.addEventListener("wheel", zoom, { passive: false });
规范
| 规范 |
|---|
| UI 事件 # event-type-wheel |
| HTML # handler-onwheel |
浏览器兼容性
加载中…