Element: scrollend イベント

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

scrollend イベントは、要素のスクロールが完了した時に発行されます。 スクロールが完了したと見なされるのは、スクロール位置に保留中の更新値がなくなり、かつユーザーがジェスチャーを完了したときです。

スクロール位置の更新には、マウスホイールのスムーズなスクロールや瞬間的なスクロール、キーボードスクロール、スクロールスナップイベント、他にもスクロール位置を更新させるAPIや ジェスチャーなどがあります。 タッチパンやトラックパッドのスクロールなどのユーザージェスチャーは、ポインターまたはキーが離されるまで完了しません。 スクロール位置が変化しなかった場合、scrollend イベントは発行されません。

文書内のスクロールが完了した時を検出したい場合は、 Document: scrollend イベントを参照してください。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("scrollend", (event) => {});

onscrollend = (event) => {};

イベント型

一般的な Event です。

例

scrollend をイベントリスナーで使用

次の例では、scrollend イベントを使用して、ユーザーが要素の内部をスクロールしていることを検出する方法を示します。

<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" 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"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">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

関連情報