Element: scrollend イベント
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used 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 Standard # handler-onscrollend |
ブラウザーの互換性
BCD tables only load in the browser