View in EnglishAlways switch to English

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() 这样的方法中使用事件名称，或设置事件处理器属性。

addEventListener("scroll", (event) => {});onscroll = (event) => {};

事件类型

通用的Event。

示例

Scroll 事件限流

由于scroll 事件可被高频触发，事件处理器不应该执行高性能消耗的操作，如 DOM 操作。而更推荐的做法是使用requestAnimationFrame()、setTimeout() 或CustomEvent 给事件限流，如下所述。

然而需要注意的是，输入事件和动画帧的触发速度大致相同，因此通常不需要下述优化。此示例使用requestAnimationFrame 优化scroll 事件。

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;  }});