このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Document: scrollend イベント
Baseline
2025
最近利用可能
December 2025以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
scrollend イベントは、文書のビューのスクロールが完了した時に発生します。
スクロールが完了したと見なされるのは、スクロール位置に保留中の更新値がなくなり、かつユーザーがジェスチャーを完了したときです。
スクロール位置の更新には、マウスホイールのスムーズなスクロールや瞬間的なスクロール、キーボードスクロール、スクロールスナップイベント、他にもスクロール位置を更新させるAPIや ジェスチャーなどがあります。 タッチパンやトラックパッドのスクロールなどのユーザージェスチャーは、ポインターまたはキーが離されるまで完了しません。 スクロール位置が変化しなかった場合、scrollend イベントは発行されません。
要素内のスクロールが完了したときを検出する場合は、 Element: scrollend イベントを参照してください。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("scrollend", (event) => {});
onscrollend = (event) => {};
イベント型
一般的な Event です。
例
文書の scrollend をイベントリスナーで使用
以下の例では、イベントリスナーを使用して scrollend イベントを使用し、ユーザーが文書のスクロールを停止したときを検出する方法を示しています。
この例では、埋め込まれている iframe 内に iframe 自身よりも縦長で横長のコンテンツがあり、iframe 内で両方向にスクロールすることが可能です。
ユーザーがスクロールを止めると、scrollend イベントが発行されます。
* {
margin: 10px;
}
.box-wrapper {
width: 900px;
border: 4px dotted;
}
.box {
height: 100px;
width: 100px;
display: block;
border: 4px dotted;
border-radius: 10px;
}
#output {
text-align: center;
font-size: 1.2em;
position: sticky;
bottom: 0;
}
<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 を使用しています。
* {
margin: 10px;
}
.box-wrapper {
width: 900px;
border: 4px dotted;
}
.box {
height: 100px;
width: 100px;
display: block;
border: 4px dotted;
border-radius: 10px;
}
#output {
text-align: center;
font-size: 1.2em;
position: sticky;
bottom: 0;
}
<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!";
};
仕様書
| 仕様書 |
|---|
| CSSOM View Module # eventdef-document-scrollend |
| HTML # handler-onscrollend |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。