文档：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 |
浏览器兼容性
加载中…