刪除逾時函式並搖動相關錯誤。您真正需要的事件如下:捲動結束。
在 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 和實作指南。