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() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
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;">スクロールしてね</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 |
ブラウザーの互換性
Loading…