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 2015年7月.

scroll イベントは、文書のビューまたは要素がスクロールされたときに発生します。スクロールが完了したことを検出するには、Document: scrollend イベントを参照してください。要素のスクロールには、Element: scroll イベントを参照してください。

構文

このイベント名をaddEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

イベント型

一般的なEvent です。

例

スクロールイベントの間引き

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