文件：scrollend 事件
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.textContent = "Document scroll event fired!";
});
document.addEventListener("scrollend", (event) => {
output.textContent = "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.textContent = "Document scroll event fired!";
};
document.onscrollend = (event) => {
output.textContent = "Document scrollend event fired!";
};
規範
| 規範 |
|---|
| CSSOM 檢視模組 # eventdef-document-scrollend |
| HTML # handler-onscrollend |
瀏覽器相容性
載入中…