Element: 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 イベントは、要素がスクロールしたときに発行されます。 スクロールの終了を検出するには、 Elementscrollend イベントを参照してください。

構文

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

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

onscroll = (event) => {};

イベント型

一般的な Event です。

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

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

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

html
<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">スクロールしてね</p>
</div>
<p style="text-align: center;" id="output">scroll イベントを待っています...</p>
js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.textContent = "scroll イベントが発生しました!";
  setTimeout(() => {
    output.textContent = "scroll イベントを待っています...";
  }, 1000);
});

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

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

html
<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">スクロールしてね</p>
</div>
<p id="output" style="text-align: center;">scroll イベントを待っています...</p>
js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.textContent = "scroll イベントが発生しました!";
  setTimeout(() => {
    output.textContent = "scroll イベントを待っています...";
  }, 1000);
};

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scroll event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報