推荐一个全新JavaScript事件：scrollend

他们好，我是Echa。

小贴士提过今年2022年一季度的这时候，有许多的前端合作开发影迷朋友圈小贴士问：当网页慢速暂停后继续执行某一姿势，是不是窃听？的难题。彼时小贴士就估计chrome 非官方约莫会在2023年1月同时实现这个机能，让他们莫心急，本来却是蛮准的。那时小贴士给他们详尽如是说超新颖崭新的scrollend 该事件怎样采用。

scrollend 该事件

在前述合作开发中，他们是不是碰到过有关慢速该事件的关键点。他们能透过onscroll该事件来窃听应用程序与否出现了慢速，但他们却极难晓得慢速会在甚么这时候顺利完成，这意味著该事件会延后促发，或是当采用者的手掌仍在萤幕上后促发。此种布季谢引致了严重错误和采用者新体验很不佳。他们从前可能将会写下下面的标识符：

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

他们根本无法约莫估计慢速是在甚么天数顺利完成，比如说在下面的标识符中他们透过setTimeout估计慢速可能将在150ms后顺利完成，这会引致反弹表达式可能将在慢速操作过程中，或是慢速完结一两年后促发，此种的采用者新体验的确是不好的。

有了scrollend该事件后，此种的市场需求就显得单纯多了：

document.onscrollend = event => {…}

能在 Codepen 新浪网自动更新：https://codepen.io/web-dot-dev/pen/rNrJRKg

当慢速暂停时能有提示信息。核心理念标识符如下表所示：

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

如下表所示图：

那么为啥此种一个看起来很单纯的该事件却花了这么长天数才被Web平台支持上呢，其实却是有很多细节需要考虑的。网页视口和慢速的细节其实非常多，假如有一个被放大的网页，你能在这个状态下进行慢速，但前述上却不一定在慢速文档，即使是此种采用者驱动的可视视口慢速交互在顺利完成后也会促发scrollend该事件。以下是所有scrollend该事件可能将会促发的场景：

scrollend该事件在以下情况下不会促发：

与其他慢速该事件一样，你能透过多种方式注册该事件侦听器：

addEventListener(“scrollend”, (event) => {// 慢速完结aScrollingElement.addEventListener(“scrollend”, (event) => {// 慢速完结

也能采用该事件属性：

document.onscrollend = (event) => {// 慢速完结aScrollingElement.onscrollend = (event) => {// 慢速完结

如果你现在想要采用的话，建议先检查该事件在当前应用程序版本中与否支持：

onscrollend in window// 可用if (onscrollend in window) {document.onscrollend = callbackelse {document.onscroll = event => {clearTimeout(window.scrollEndTimer)window.scrollEndTimer = setTimeout(callback, 100)

这个该事件目前已经在Firefox 109版本中提供支持，后续其他应用程序也将陆续提供支持：

在还没有提供支持的应用程序版本中，你也能先采用下面这polyfill：

Github：https://github.com/argyleink/scrollyfills

首先需要在终端中安装 npm 包

npm i -D scrollyfills

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

import {scrollend} from “scrollyfills”document.onscrollend = callback

polyfill 将渐进增强以采用应用程序内置的 scrollend 该事件（如果可用）。如果它不可用，脚本会监视指针该事件并慢速以对它可能将完结的该事件进行最佳评估。

为了保持网页的运行新体验流畅，在慢速该事件出现时应该尽量避免复杂的计算逻辑。所以很多需要在慢速时促发的复杂的计算他们所推荐在scrollend该事件中顺利完成。一个比较常见的用例是将相关的 UI 元素与慢速暂停的位置进行同步。比如说下表所示面的场景将轮播慢速位置与点指示器同步。

你能在下面这个网站中查看一些真实案例的采用场景和写法：

新浪网演示：https://gui-challenges.web.app/carousel/dist/

具体如下表所示：