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() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("scrollend", (event) => {}); onscrollend = (event) => {}; イベント型
一般的な Event です。
例
scrollend をイベントリスナーで使用
次の例では、scrollend イベントを使用して、ユーザーが要素の内部をスクロールしていることを検出する方法を示します。
html
<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> js
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 イベントハンドラープロパティを使用して、ユーザーがスクロールしていることを検出する方法を示しています。
html
<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> js
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 |