Document: 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 イベントは発行されません。
要素内のスクロールが完了したときを検出する場合は、 Element: scrollend イベントを参照してください。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("scrollend", (event) => {});
onscrollend = (event) => {};
イベント型
一般的な Event です。
例
文書の scrollend をイベントリスナーで使用
以下の例では、イベントリスナーを使用して scrollend イベントを使用し、ユーザーが文書のスクロールを停止したときを検出する方法を示しています。
この例では、埋め込まれている iframe 内に iframe 自身よりも縦長で横長のコンテンツがあり、iframe 内で両方向にスクロールすることが可能です。
ユーザーがスクロールを止めると、scrollend イベントが発行されます。
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>
const output = document.querySelector("p#output");
document.addEventListener("scroll", (event) => {
output.innerHTML = `Document scroll event fired!`;
});
document.addEventListener("scrollend", (event) => {
output.innerHTML = `Document scrollend event fired!`;
});
onscrollend イベントハンドラープロパティの使用
以下の例では、scrollend イベントハンドラープロパティを使用して、ユーザーが文書のスクロールを停止したときを検出する方法を示しています。
この例では、埋め込まれている iframe 内に iframe 自身よりも縦長で横長のコンテンツがあるため、iframe 内で両方の方向にスクロールすることが可能です。
これは最初の例を基に作成したものですが、イベントリスナーの代わりに document.onscrollend を使用しています。
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>
document.onscroll = (event) => {
output.innerHTML = "Document scroll event fired!";
};
document.onscrollend = (event) => {
output.innerHTML = "Document scrollend event fired!";
};
仕様書
| Specification |
|---|
| CSSOM View Module # eventdef-document-scrollend |
| HTML # handler-onscrollend |