WheelEvent 接口表示用户滚动鼠标滚轮或类似输入设备时触发的事件。
重要：该事件为标准规定的滚轮事件接口。早期的浏览器实现过
MouseWheelEvent和MouseScrollEvent两种滚轮事件接口，但这两种接口皆非标准，加之各浏览器间对其兼容性极差。因而开发者应使用该标准事件接口取代这两个非标准接口。不要混淆
wheel 事件和 scroll 事件：wheel 事件的默认动作取决于浏览器实现。因此 wheel 事件不一定会触发 scroll 事件。即便滚轮事件引发了文档内容的滚动行为，也不表示 wheel 事件中的 delta* 值恰好反映文档内容的滚动方向。因此，不要依赖 delta* 属性获知文档内容的滚动方向。可在文档内容滚动事件（scroll）中监视target的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的方法。
规范
| 规范 | 状态 | 注释 |
|---|---|---|
| UI Events The WheelEvent interface |
Working Draft | |
| Document Object Model (DOM) Level 3 Events Specification WheelEvent |
Obsolete | Initial definition. |
浏览器兼容性
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
WheelEvent | Chrome Full support 31 | Edge Full support 12 | Firefox Full support 17 | IE Full support 9 | Opera Full support 18 | Safari Full support 6.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 17 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
WheelEvent() constructor | Chrome Full support Yes | Edge Full support ≤18 | Firefox Full support 17 | IE No support No | Opera Full support Yes | Safari Full support 6.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 17 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
deltaMode | Chrome Full support 31 | Edge Full support 12 | Firefox Full support 17 | IE Full support 9 | Opera Full support 18 | Safari Full support 6.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 17 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
deltaX | Chrome Full support 31 | Edge Full support 12 | Firefox Full support 17 | IE
Full support
9
| Opera Full support 18 | Safari Full support 6.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 17 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
deltaY | Chrome Full support 31 | Edge Full support 12 | Firefox Full support 17 | IE
Full support
9
| Opera Full support 18 | Safari Full support 6.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 17 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
deltaZ | Chrome Full support 31 | Edge Full support 12 | Firefox Full support 17 | IE
Full support
9
| Opera Full support 18 | Safari Full support 6.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 17 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support Yes |
Pinch-to-zoom maps to WheelEvent + ctrl key. | Chrome Full support 31 | Edge Full support ≤79 | Firefox Full support 55 | IE ? | Opera ? | Safari No support No | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 55 | Opera Android ? | Safari iOS No support No | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
参见
wheel事件- 该接口取代的过时接口：
MouseScrollEvent（Gecko内核浏览器）MouseWheelEvent（非Gecko内核的浏览器）