大家好，我是 CUGGZ。

在開發中，可能會遇到當頁面滾動停止之后執行某些操作的需求。在 scrollend? 事件之前，并沒有可靠的方法來檢測頁面滾動是否完成。這意味著事件會延遲觸發，或者當用戶的手指仍在屏幕上時觸發。這種不可靠性導致了錯誤和用戶體驗不佳。下面就來看看全新的 scrollend 事件是如何使用的！

概述

以前可能會使用定時器來檢測滾動停止：

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

這個 setTimeout() 可以知道滾動是否停止了 100 毫秒。這使它更像是滾動已暫停事件，而不是滾動已結束事件。

有了 scrollend 事件，瀏覽器就會幫我們完成滾動停止的監聽：

document.onscrollend = event {…}

可以在 Codepen 查看示例：https://codepen.io/web-dot-dev/pen/rNrJRKg，當滾動停止時會有提示。核心代碼如下：

document.onscrollend = event => {
  Toast('scroll end')
}

使用

scrollend 事件會在以下情況被觸發：

• 用戶的觸摸已被釋放；
• 用戶的指針已釋放滾動條；
• 用戶的按鍵已被釋放；
• 滾動到片段已完成；
• 滾動捕捉已完成；
• scrollTo()已完成；
• 用戶已滾動視覺視口。

scrollend 事件在以下情況不會觸發：

• 用戶的手勢沒有導致任何滾動位置變化；
• scrollTo() 沒有產生任何移動。

這個事件花了很長時間才出現在 Web 平臺上的一個原因就是有許多小細節需要進行規范。最復雜的就是視覺視口與文檔的滾動結束細節。對于放大的網頁，在此縮放狀態下，可以四處滾動，但不一定是在滾動文檔。不過，即使是這個視覺視口用戶驅動的滾動交互也會在完成后發出 scrollend 事件。

與其他滾動事件一樣，可以通過多種方式注冊偵聽器：

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

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

也可以使用事件屬性：

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

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

瀏覽器支持

目前僅 Firefox 109 版本支持 scrollend 事件。不久的將來，Chrome 111 版本也將支持該事件。

如果現在想要使用這個事件，可以在開始時檢查支持情況，如果不支持該事件就繼續使用當前的滾動結束策略（如果有的話）：

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

這樣就能在可用時漸進增強 scrollend 事件。當然也可以使用 polyfill：https://github.com/argyleink/scrollyfills

首先需要在終端中安裝 npm 包：

npm i -D scrollyfills

然后在需要的地方使用 scrollend 事件：

import {scrollend} from 'scrollyfills';

someElementThatScrolls.addEventListener('scrollend', event => {
  console.log('scroll has ended');
});

polyfill 將漸進增強以使用瀏覽器內置的 scrollend 事件（如果可用）。如果它不可用，腳本會監視指針事件并滾動以對它可能結束的事件進行最佳評估。

參考：https://developer.chrome.com/blog/scrollend-a-new-javascript-event/