刪除逾時函式並搖動相關錯誤。您真正需要的事件如下：捲動結束。
在 scrollend 事件之前，目前沒有可靠的方式能偵測到捲動是否已完成。這意味著，事件會在使用者的手指靜止不在螢幕上時觸發。如此才能得知捲動何時真正結束，因而導致錯誤和使用者體驗不佳。
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
這項 setTimeout() 策略最好的辦法，就是瞭解 100ms 是否停止捲動。因此，就像捲動作業已暫停事件，而不是捲動已結束事件。
收到 scrollend 事件後，瀏覽器會為您完成所有這項困難的評估。
document.onscrollend = event => {…}
真棒發出正確的時間，並滿足各種有意義的條件，然後再發出。
試試看！
活動詳細資料
scrollend 事件會在下列情況觸發：
- 瀏覽器不再執行捲動動畫或翻譯捲動作業。
- 使用者的觸控功能釋放。
- 使用者的指標釋放了捲動指標。- 使用者的按鍵動作已放開。
- 捲動至片段已完成。
- 捲動對齊作業已完成。
- scrollTo() 已完成。
- 使用者捲動了視覺可視區域。
發生下列情況時，不會觸發 scrollend 事件：
- 使用者的手勢未造成任何捲動位置變更 (未發生轉譯)。
- scrollTo()沒有找到任何翻譯。
此事件需要花費太多時間才會進入網路平台，是由於需要詳細規格的詳細資料非常小，所以其中一個最複雜的領域是，對視覺可視區域的 scrollend 詳細資料，與文件反映。假設你放大的網頁。您可以在此縮放狀態時捲動畫面，且不一定要捲動文件。請放心，即使是使用者驅動的視覺可視區域捲動互動，也會在完成時發出 scrollend 事件。
使用事件
如同其他捲動事件，您可以透過幾種方式註冊事件監聽器。
addEventListener("scrollend", (event) => {
// scroll ended
});
aScrollingElement.addEventListener("scrollend", (event) => {
// scroll ended
});
或者，您也可以使用事件屬性：
document.onscrollend = (event) => {
// scroll ended
};
aScrollingElement.onscrollend = (event) => {
// scroll ended
};
聚合與漸進式強化
如果想立即參加這項新活動，請參考我們精心提供的建議。您可以繼續使用目前的捲動結束策略 (如果有的話)，並在一開始確認支援狀況：
'onscrollend' in window
// true, if available
根據瀏覽器是否提供該事件，此選項會回報為 true 或 false。通過這項檢查後，您可以分支程式碼：
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
這是一個正常的開始，可逐步改善 scrollend 事件 (如果有的話)。您也可以嘗試使用 polyfill (NPM)，讓瀏覽器發揮最佳效用：
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
系統會逐步強化 polyfill，以便使用瀏覽器內建的 scrollend 事件 (如果有的話)。如果無法使用，指令碼會監控指標事件並捲動畫面，盡可能推估結束的事件。
用途
建議您避免在捲動時執行需要進行大量運算的工作。這種做法可確保捲動功能免費提供大量的記憶體和處理工作，進而保持流暢的使用體驗。使用 scrollend 事件可以提供呼叫及執行困難工作的最佳時機，因為捲動不會再發生。
scrollend 事件可用來觸發各種動作。常見的用途是將相關 UI 元素與捲動停止的位置同步。例如：
- 同步處理含有點指標的輪轉介面捲動位置。
- 將圖片庫項目與中繼資料進行同步處理。
- 在使用者捲動至新分頁時擷取資料。
假設使用者滑開電子郵件等情境。使用者完成抹除作業後，即可根據他們捲動至的位置執行動作。
此外，您也可以在程式輔助、使用者捲動或記錄分析這類動作後，使用這個事件進行同步處理。
以下是一個很好的範例，其中多個元素 (例如箭頭、點和焦點) 必須根據捲動位置更新。觀看我在 YouTube 上打造輪轉介面的方式影片。此外，您也可以試試線上示範。
感謝 Mehdi Kazemi 提供他的工程機會，並感謝 Robert Flack 提供 API 和實作指南。