概述

在開發(fā)中，可能會(huì)遇到當(dāng)頁(yè)面滾動(dòng)停止之后執(zhí)行某些操作的需求。在 scrollend 事件之前，并沒(méi)有可靠的方法來(lái)檢測(cè)頁(yè)面滾動(dòng)是否完成。這意味著事件會(huì)延遲觸發(fā)，或者當(dāng)用戶的手指仍在屏幕上時(shí)觸發(fā)。這種不可靠性導(dǎo)致了錯(cuò)誤和用戶體驗(yàn)不佳。

以前可能會(huì)使用定時(shí)器來(lái)檢測(cè)滾動(dòng)停止：

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

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

有了 scrollend 事件，瀏覽器就會(huì)幫我們完成滾動(dòng)停止的監(jiān)聽：

document.onscrollend = event => {…}

可以在 Codepen 查看示例：codepen.io/web-dot-dev…，當(dāng)滾動(dòng)停止時(shí)會(huì)有提示。核心代碼如下：

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

使用

scrollend 事件會(huì)在以下情況被觸發(fā)：

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

scrollend 事件在以下情況不會(huì)觸發(fā)：

• 用戶的手勢(shì)沒(méi)有導(dǎo)致任何滾動(dòng)位置變化；
• scrollTo() 沒(méi)有產(chǎn)生任何移動(dòng)。

這個(gè)事件花了很長(zhǎng)時(shí)間才出現(xiàn)在 Web 平臺(tái)上的一個(gè)原因就是有許多小細(xì)節(jié)需要進(jìn)行規(guī)范。最復(fù)雜的就是視覺(jué)視口與文檔的滾動(dòng)結(jié)束細(xì)節(jié)。對(duì)于放大的網(wǎng)頁(yè)，在此縮放狀態(tài)下，可以四處滾動(dòng)，但不一定是在滾動(dòng)文檔。不過(guò)，即使是這個(gè)視覺(jué)視口用戶驅(qū)動(dòng)的滾動(dòng)交互也會(huì)在完成后發(fā)出 scrollend 事件。

與其他滾動(dòng)事件一樣，可以通過(guò)多種方式注冊(cè)偵 聽 器：

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

也可以使用事件屬性：

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

瀏覽器支持

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

如果現(xiàn)在想要使用這個(gè)事件，可以在開始時(shí)檢查支持情況，如果不支持該事件就繼續(xù)使用當(dāng)前的滾動(dòng)結(jié)束策略（如果有的話）：

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

這樣就能在可用時(shí)漸進(jìn)增強(qiáng) scrollend 事件。當(dāng)然也可以使用 polyfill：github.com/argyleink/s…

首先在終端中安裝npm包：

npm i -D scrollyfills

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

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

polyfill 將漸進(jìn)增強(qiáng)以使用瀏覽器內(nèi)置的 scrollend 事件（如果可用）。 如果它不可用，腳本會(huì)監(jiān)視指針事件并滾動(dòng)以對(duì)它可能結(jié)束的事件進(jìn)行最佳評(píng)估。

參考：developer.chrome.com/blog/scroll…

以上就是超實(shí)用的全新JavaScript事件Scrollend實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Scrollend事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論