Document：scroll 事件

当文档视图滚动后，scroll 事件就会触发。要检测滚动何时结束，请参阅 Document：scrollend 事件 (en-US)。关于元素滚动，请参见 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 Standard
# handler-onscroll

浏览器兼容性

BCD tables only load in the browser

参见