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 July 2015.
語法
在例如 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 |