刪除逾時函式並解決錯誤，以下是您真正需要的事件：Scrollend。
在 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 和導入指南。