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
# handler-onscroll

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见