Document：scroll 事件
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
scroll 事件會在文件視區被捲動時觸發。若要偵測捲動完成的時機，參見 Document 的 scrollend 事件。若是元素的捲動，參見 Element 的 scroll 事件。
語法
在例如 addEventListener() 等方法中使用事件名稱，或設定事件處理屬性。
js
addEventListener("scroll", (event) => { }) onscroll = (event) => { } 事件類型
通用的 Event。
範例
捲動事件的節流
由於 scroll 事件可能以高頻率觸發，事件處理器不應執行計算量大的操作，例如 DOM 修改。建議透過 requestAnimationFrame()、setTimeout() 或 CustomEvent 進行節流處理，如下所示。
然而需要注意的是，輸入事件和動畫幀的觸發頻率大致相同，因此以下的最佳化通常不是必要的。此範例針對 requestAnimationFrame 最佳化了 scroll 事件。
js
let lastKnownScrollPosition = 0; let ticking = false; function doSomething(scrollPos) { // 依據捲動位置進行某些操作 } document.addEventListener("scroll", (event) => { lastKnownScrollPosition = window.scrollY; if (!ticking) { window.requestAnimationFrame(() => { doSomething(lastKnownScrollPosition); ticking = false; }); ticking = true; } }); 規範
| Specification |
|---|
| CSSOM View Module # eventdef-document-scroll |
| HTML # handler-onscroll |
瀏覽器相容性
Loading…