Element: scrollend イベント
Baseline
2025
Newly available
Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
scrollend イベントは、要素のスクロールが完了した時に発行されます。
スクロールが完了したと見なされるのは、スクロール位置に保留中の更新値がなくなり、かつユーザーがジェスチャーを完了したときです。
スクロール位置の更新には、マウスホイールのスムーズなスクロールや瞬間的なスクロール、キーボードスクロール、スクロールスナップイベント、他にもスクロール位置を更新させるAPIや ジェスチャーなどがあります。 タッチパンやトラックパッドのスクロールなどのユーザージェスチャーは、ポインターまたはキーが離されるまで完了しません。 スクロール位置が変化しなかった場合、scrollend イベントは発行されません。
文書内のスクロールが完了した時を検出したい場合は、 Document: scrollend イベントを参照してください。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("scrollend", (event) => {});
onscrollend = (event) => {};
イベント型
一般的な Event です。
例
scrollend をイベントリスナーで使用
次の例では、scrollend イベントを使用して、ユーザーが要素の内部をスクロールしていることを検出する方法を示します。
<div id="scroll-box">
<p id="scroll-box-title">Scroll me!</p>
<p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.addEventListener("scroll", (event) => {
output.innerHTML = "Scroll event fired, waiting for scrollend...";
});
element.addEventListener("scrollend", (event) => {
output.innerHTML = "Scrollend event fired!";
});
onscrollend イベントハンドラープロパティの使用
次の例では、onscrollend イベントハンドラープロパティを使用して、ユーザーがスクロールしていることを検出する方法を示しています。
<div id="scroll-box">
<p id="scroll-box-title">Scroll me!</p>
<p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.onscroll = (event) => {
output.innerHTML = "Element scroll event fired, waiting for scrollend...";
};
element.onscrollend = (event) => {
output.innerHTML = "Element scrollend event fired!";
};
仕様書
| Specification |
|---|
| CSSOM View Module # eventdef-document-scrollend |
| HTML # handler-onscrollend |