Scrollend，這是新的 JavaScript 事件

刪除逾時函式並排除其錯誤，以下是您真正需要的事件：scrollend。

Adam Argyle

在 scrollend 事件推出之前，沒有可靠的方法可以偵測捲動動作是否已完成。這表示事件會延遲觸發，或在使用者手指仍放在螢幕上時觸發。這種無法可靠地得知捲動動作實際結束的情況，會導致錯誤並造成使用者體驗不佳。

之前

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

setTimeout() 策略最能做的，就是判斷 100ms 是否已停止捲動。這會更像是捲動已暫停事件，而非捲動已結束事件。

在 scrollend 事件之後，瀏覽器會為您執行所有艱難的評估作業。

使用後

document.onscrollend = event => {…}

這很棒。發出正確的時間，並滿足各種有意義的條件，然後再發出。

瀏覽器支援

• 114
• 114
• 109
• x

資料來源

試試看！

活動詳細資料

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 和實作指南。