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

规范

浏览器兼容性

参见

• Document：scrollend 事件
• Element：scroll 事件
• Element：scrollend 事件