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 イベントは高い確率で生じることができるため、イベントハンドラーは 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

関連情報