Scrollend，這是新的 JavaScript 事件

刪除逾時函式並解決錯誤，你需要的是 scrollend 事件。

Adam Argyle

在 scrollend 事件推出前，沒有可靠的方法可以偵測捲動是否完成。這表示事件會延遲觸發，或在使用者手指仍停留在螢幕上時觸發。由於無法準確判斷捲動何時結束，因此會導致錯誤，並造成使用者體驗不佳。

之前

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

這個 setTimeout() 策略最多只能知道捲動是否已停止 100ms。這比較像是捲動暫停事件，而非捲動結束事件。

scrollend 事件發生後，瀏覽器會為您執行所有這類困難的評估作業。

晚於

document.onscrollend = event => {…}

這就是好東西。在發出前，完美掌握時機並填滿有意義的條件。

Browser Support

• 114
• 114
• 109
• 26.2

Source

試試看！

活動詳細資料

scrollend 事件會在下列情況觸發： - 瀏覽器不再以動畫呈現或轉譯捲動。- 使用者已放開手指。 - 使用者的指標已放開捲軸。 - 使用者已放開按鍵。 - 捲動至片段已完成。 - 捲動貼齊已完成。 - scrollTo() 已完成。 - 使用者捲動了視覺可視區域。

在下列情況下，系統不會觸發 scrollend 事件： - 使用者的手勢未導致任何捲動位置變更 (未發生平移)。 - scrollTo() 未產生任何翻譯。

這項事件之所以花了這麼久的時間才登上網路平台，是因為有許多小細節需要規格細節。其中最複雜的部分，就是闡明視覺可視區域與文件的 scrollend 詳細資料。假設您放大網頁，在這種縮放狀態下，您可以捲動畫面，但不一定會捲動文件。請放心，即使是這種由使用者驅動的視覺可視區域捲動互動，也會在完成後發出 scrollend 事件。

使用事件

與其他捲動事件一樣，您可以透過多種方式註冊事件監聽器。

addEventListener("scrollend",> (event) = {
  // scroll ended
});

aScrollingElement.addEventListener("scroll>end", (event) = {
  // scroll ended
});

或使用事件屬性：

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfill 和漸進增強

如果想立即使用這個新事件，建議您採取下列做法。您可以繼續使用目前的捲動結束策略 (如果有的話)，並在策略開頭檢查是否支援：

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