Document: scrollend イベント

Baseline 2025

Newly available

Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or 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>  <div></div>  <div></div>  <div></div>  <div></div></div><p>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>  <div></div>  <div></div>  <div></div>  <div></div></div><p>Waiting on scroll events...</p>

document.onscroll = (event) => {  output.innerHTML = "Document scroll event fired!";};document.onscrollend = (event) => {  output.innerHTML = "Document scrollend event fired!";};