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
イベントは、要素がスクロールしたときに発行されます。
スクロールの終了を検出するには、 Element
の scrollend
イベントを参照してください。
構文
このイベント名を addEventListener()
などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("scroll", (event) => {});
onscroll = (event) => {};
イベント型
一般的な Event
です。
例
以下の例では、 scroll
イベントをイベントリスナーと onscroll
イベントハンドラープロパティによって使用する方法を示しています。
scroll
イベントは高頻度で発行されるため、 setTimeout()
メソッドを使用してイベントハンドラーをスロットルで制御しています。
その他の requestAnimationFrame
を使用した例については、 Document
の scroll
イベントページを参照してください。
scroll
をイベントリスナーで使用
次の例では、scroll
イベントを使用して、ユーザーが要素の内部をスクロールしていることを検出する方法を示します。
<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>
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
イベントハンドラープロパティを使用して、ユーザーがスクロールしていることを検出する方法を示しています。
<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>
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support