Document: scrollend イベント

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

要素内のスクロールが完了したときを検出する場合は、 Element: scrollend イベントを参照してください。

構文

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

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

onscrollend = (event) => {};

イベント型

一般的な Event です。

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

以下の例では、イベントリスナーを使用して scrollend イベントを使用し、ユーザーが文書のスクロールを停止したときを検出する方法を示しています。 この例では、埋め込まれている iframe 内に iframe 自身よりも縦長で横長のコンテンツがあり、iframe 内で両方向にスクロールすることが可能です。 ユーザーがスクロールを止めると、scrollend イベントが発行されます。

html
<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>
js
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 を使用しています。

html
<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>
js
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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
scrollend event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報