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

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

構文

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

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

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

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

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

html

<div  >  <p>スクロールしてね</p></div><p>scroll イベントを待っています...</p>

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  >  <p>スクロールしてね</p></div><p>scroll イベントを待っています...</p>

const element = document.querySelector("div#scroll-box");const output = document.querySelector("p#output");element.onscroll = (event) => {  output.textContent = "scroll イベントが発生しました！";  setTimeout(() => {    output.textContent = "scroll イベントを待っています...";  }, 1000);};