WheelEvent DOM事件会在用户滚动鼠标滚轮或操作其它类似鼠标的设备时触发。

该事件为标准规定的事件接口。早期的浏览器实现过MouseWheelEventMouseScrollEvent两种滚轮事件接口,但这两种接口皆非标准,加之各浏览器间对其兼容性极差。因而开发者应用该标准事件接口取代这两个非标准接口。
注意事项: 请勿想当然依据滚轮方向(即该事件的各delta属性值)来推断文档内容的滚动方向,因标准未定义滚轮事件具体会引发什么样的行为,引发的行为实际上是各浏览器自行定义的。即便滚轮事件引发了文档内容的滚动行为,也不表示滚轮方向和文档内容的滚动方向一定相同。因而通过该滚轮事件获知文档内容滚动方向的方法并不可靠。要获取文档内容的滚动方向,可在文档内容滚动事件(scroll)中监视scrollLeftscrollTop二值变化情况,即可推断出滚动方向了。

构造函数

WheelEvent()
创建一个WheelEvent对象。

属性

该接口继承了父接口MouseEventUIEventEvent的属性。

WheelEvent.deltaX 只读
返回double值,该值表示滚轮的横向滚动量。
WheelEvent.deltaY 只读
返回double值,该值表示滚轮的纵向滚动量。
WheelEvent.deltaZ 只读
返回double值,该值表示滚轮的z轴方向上的滚动量。
WheelEvent.deltaMode 只读
返回unsigned long值,该值表示上述各delta的值的单位。该值及所表示的单位如下:
常量 描述
DOM_DELTA_PIXEL 0x00 滚动量单位为像素。
DOM_DELTA_LINE 0x01 滚动量单位为行。
DOM_DELTA_PAGE 0x02 滚动量单位为页。

方法

该接口本身未定义方法,但继承了父接口MouseEventUIEventEvent的方法。

规范

规范 状态 注释
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 习惯上用于缩放)。

参见

文档标签和贡献者

此页面的贡献者: Zhang-Junzhi, mahuan2, teoli, ziyunfei
最后编辑者: Zhang-Junzhi,