文件：scroll 事件
當文件檢視被滾動時，會觸發 scroll 事件。要檢測滾動何時完成，請參閱 Document 的 scrollend 事件。對於元素滾動，請參閱 Element 的 scroll 事件。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("scroll", (event) => { })
onscroll = (event) => { }
事件型別
一個通用的 Event。
示例
滾動事件節流
由於 scroll 事件的觸發頻率可能很高，事件處理程式不應執行計算密集型操作，例如 DOM 修改。如果您在快速滾動時注意到 卡頓，您應該考慮 節流 事件。
請注意，您可能會看到使用 requestAnimationFrame() 來節流 scroll 事件處理程式的程式碼。這是無用的，因為動畫幀回撥的觸發頻率與 scroll 事件處理程式相同。相反，您必須自己測量超時，例如使用 setTimeout()。
js
let lastKnownScrollPosition = 0;
let ticking = false;
function doSomething(scrollPos) {
// Do something with the scroll position
}
document.addEventListener("scroll", (event) => {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
// Throttle the event to "do something" every 20ms
setTimeout(() => {
doSomething(lastKnownScrollPosition);
ticking = false;
}, 20);
ticking = true;
}
});
或者，考慮改用 IntersectionObserver，它允許基於閾值的監聽。
規範
| 規範 |
|---|
| CSSOM 檢視模組 # eventdef-document-scroll |
| HTML # handler-onscroll |
瀏覽器相容性
載入中…