文档：滚动事件

当文档视图滚动时，会触发 **scroll** 事件。要检测何时滚动完成，请参阅Document的 scrollend 事件。对于元素滚动，请参阅Element的 scroll 事件。

语法

在诸如 addEventListener() 之类的 方法中使用事件名称，或者设置事件处理程序属性。

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

onscroll = (event) => {};

事件类型

一个通用的 Event。

示例

滚动事件节流

由于 scroll 事件可能以高频率触发，因此事件处理程序不应该执行诸如 DOM 修改之类的计算量大的操作。相反，建议使用 节流 事件，方法是使用 requestAnimationFrame()、setTimeout() 或 CustomEvent，如下所示。

但是请注意，输入事件和动画帧的触发频率大致相同，因此以下优化通常没有必要。此示例针对 requestAnimationFrame 优化 scroll 事件。

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) {
    window.requestAnimationFrame(() => {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});

规范

规范
CSSOM 视图模块
# eventdef-document-scroll
HTML 标准
# handler-onscroll

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅