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 July 2015.

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) {
  // 依據捲動位置進行某些操作
}

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

瀏覽器相容性

參見