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() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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;
}

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>

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;
}

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>

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 Standard # handler-onscrollend

ブラウザーの互換性

BCD tables only load in the browser