Element: scroll イベント

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

構文

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

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

onscroll = (event) => {};

イベント型

一般的な Event です。

例

以下の例では、scroll イベントをイベントリスナーと onscroll イベントハンドラープロパティによって使用する方法を示しています。 scroll イベントは高頻度で発行されるため、setTimeout() メソッドを使用してイベントハンドラーをスロットルで制御しています。 その他の requestAnimationFrame を使用した例については、Document: scroll イベントページを参照してください。

scroll をイベントリスナーで使用

次の例では、scroll イベントを使用して、ユーザーが要素の内部をスクロールしていることを検出する方法を示します。

html
<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>
js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.innerHTML = "Scroll event fired!";
  setTimeout(() => {
    output.innerHTML = "Waiting on scroll events...";
  }, 1000);
});

onscroll イベントハンドラープロパティの使用

次の例では、onscroll イベントハンドラープロパティを使用して、ユーザーがスクロールしていることを検出する方法を示しています。

html
<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>
js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.innerHTML = "Element scroll event fired!";
  setTimeout(() => {
    output.innerHTML = "Waiting on scroll events...";
  }, 1000);
};

仕様書

Specification
CSSOM View Module
# eventdef-document-scroll
HTML Standard
# handler-onscroll

ブラウザーの互換性

BCD tables only load in the browser

関連情報