此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 事件限流
由于 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...