元素：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 |
瀏覽器相容性
載入中…