WheelEvent DOM事件会在用户滚动鼠标滚轮或操作其它类似鼠标的设备时触发。
该事件为标准规定的事件接口。早期的浏览器实现过
MouseWheelEvent和MouseScrollEvent两种滚轮事件接口，但这两种接口皆非标准，加之各浏览器间对其兼容性极差。因而开发者应用该标准事件接口取代这两个非标准接口。注意事项： 请勿想当然依据滚轮方向（即该事件的各delta属性值）来推断文档内容的滚动方向，因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。即便滚轮事件引发了文档内容的滚动行为，也不表示滚轮方向和文档内容的滚动方向一定相同。因而通过该滚轮事件获知文档内容滚动方向的方法并不可靠。要获取滚动方向，可在滚动事件（
scroll）中监视scrollLeft和scrollTop二值变化情况，即可推断出滚动方向了。<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/zh-CN/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">UIEvent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#D4DDE4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">MouseEvent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#D4DDE4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/zh-CN/docs/Web/API/WheelEvent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">WheelEvent</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
构造函数
WheelEvent()- 创建一个
WheelEvent对象。
属性
该接口继承了父接口MouseEvent、UIEvent、Event的属性。
WheelEvent.deltaX只读- 返回
double值，该值表示滚轮的横向滚动量。 WheelEvent.deltaY只读- 返回
double值，该值表示滚轮的纵向滚动量。 WheelEvent.deltaZ只读- 返回
double值，该值表示滚轮的z轴方向上的滚动量。 WheelEvent.deltaMode只读- 返回
unsigned long值，该值表示上述各delta的值的单位。该值及所表示的单位如下：常量 值 描述 DOM_DELTA_PIXEL0x00滚动量单位为像素。 DOM_DELTA_LINE0x01滚动量单位为行。 DOM_DELTA_PAGE0x02滚动量单位为页。
方法
该接口本身未定义方法，但继承了父接口MouseEvent、UIEvent、Event的方法。
规范
| 规范 | 状态 | 注释 |
|---|---|---|
| Document Object Model (DOM) Level 3 Events Specification WheelEvent |
Obsolete | Initial definition. |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 功能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| 基本功能 | 31 | (Yes) | 17.0 (17.0) | 9.0 | 18 | 7.0 |
window.WheelEvent |
(Yes) | (Yes) | 17.0 (17.0) | 9.0 | (Yes) | (Yes) [1] |
WheelEvent + Ctrl 键[2]实现按住缩放功能 |
(Yes) | ? | 55.0 (55.0) | ? | ? | ? |
| 功能 | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| 基本功能 | 未实现 | (Yes) | (Yes) | 17.0 (17.0) | ? | (Yes) | 未实现 | (Yes) |
window.WheelEvent |
未实现 | (Yes) | ? | 17.0 (17.0) | ? | (Yes) | ? | (Yes) |
WheelEvent + Ctrl 键[2]实现按住缩放功能 |
? | ? | ? | 55.0 (55.0) | ? | ? | ? | (Yes) |
[1] 严格说，Safari并非真正支持WheelEvent，只不过会返回window.WheelEvent对象。
[2] 这样在触摸平面上，比如触摸屏幕或是触摸板上，开发者就可通过用户按住缩放的手势来实现简单的缩放功能 (鼠标滚轮 + Ctrl 习惯上用于缩放)。
参见
wheel- 该接口取代的过时接口：
MouseScrollEvent（Gecko内核浏览器）MouseWheelEvent（非Gecko内核的浏览器）