Document: scroll イベント

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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;
 }
});