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-TW/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-TW/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-TW/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-TW/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.deltaXRead only- 返回
double值，該值表示滾輪的橫向滾動量。 WheelEvent.deltaYRead only- 返回
double值，該值表示滾輪的縱向滾動量。 WheelEvent.deltaZRead only- 返回
double值，該值表示滾輪的z軸方向上的滾動量。 WheelEvent.deltaModeRead only- 返回
unsigned long值，該值表示上述各delta的值的單位。該值及所表示的單位如下：常數 值 描述 DOM_DELTA_PIXEL0x00滾動量單位爲像素。 DOM_DELTA_LINE0x01滾動量單位爲行。 DOM_DELTA_PAGE0x02滾動量單位爲頁。
方法
該介面本身未定義方法，但繼承了父介面MouseEvent、UIEvent、Event的方法。
規範
| 規範 | 狀態 | 註解 |
|---|---|---|
| Document Object Model (DOM) Level 3 Events Specification The definition of 'WheelEvent' in that specification. |
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 |
|---|---|---|---|---|---|---|---|---|
| 基本功能 | No support | (Yes) | (Yes) | 17.0 (17.0) | ? | (Yes) | No support | (Yes) |
window.WheelEvent |
No support | (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內核的瀏覽器）