Scrollend，這是新的 JavaScript 事件

刪除逾時函式並搖動相關錯誤。您真正需要的事件如下：捲動結束。

Adam Argyle

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