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

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

#scroll-box {
 height: 100px;
 width: 100px;
 float: left;
 overflow: scroll;
 outline: 4px dotted;
 margin: 4px;
}
#scroll-box-title {
 position: fixed;
 top: 5px;
 left: 5px;
 transform: translateX(0);
}
#large-element {
 height: 200px;
 width: 200px;
}
#output {
 text-align: center;
}

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>

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 イベントハンドラープロパティを使用して、ユーザーがスクロールしていることを検出する方法を示しています。

#scroll-box {
 height: 100px;
 width: 100px;
 float: left;
 overflow: scroll;
 outline: 4px dotted;
 margin: 4px;
}
#scroll-box-title {
 position: fixed;
 top: 5px;
 left: 5px;
 transform: translateX(0);
}
#large-element {
 height: 200px;
 width: 200px;
}
#output {
 text-align: center;
}

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>

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

[フレーム]