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 September 2020.

当文档视图滚动后，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 Standard
# handler-onscroll

浏览器兼容性

BCD tables only load in the browser

参见