嗨，我是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('scrollend')}使用scrollend事件会在以下几种情况下被触发：用户的触摸已经被释放；用户指针已释放滚动条；用户的键已被按下释放；滚动到片段完成；滚动捕获完成；滚动到（）完成；用户滚动视觉视口。scrollend事件在以下情况下不会触发：用户的手势不会引起任何滚动位置变化；scrollTo()不产生任何移动。这个事件花了这么长时间才出现在网络平台上的一个原因是有许多小细节需要说明。最复杂的是视觉视口和文档滚动端的细节。对于放大的网页，在这种缩放状态下，你可以四处滚动，但不一定滚动文档。但是，即使是这种视觉视口用户驱动的滚动交互也会在完成时发出scrollend事件。与其他滚动事件一样，可以通过多种方式注册侦听器：addEventListener("scrollend",(event)=>{//scrollended});aScrollingElement.addEventListener("scrollend",(event)=>{//滚动结束});您还可以使用事件属性：document.onscrollend=(event)=>{//scrollended};aScrollingElement.onscrollend=(event)=>{//滚动结束};浏览器支持目前只有FirefoxVersion109支持scrollend事件。Chrome111也将??在不久的将来支持这项活动。如果现在要使用这个事件，可以一开始检查是否支持，如果不支持，则继续使用当前滚动结束策略（如果有的话）：if('onscrollend'inwindow){document.onscrollend=callback}else{document.onscroll=event{clearTimeout(window.scrollEndTimer)window.scrollEndTimer=setTimeout(callback,100)}}这将在可用时逐步增强scrollend事件。当然也可以使用polyfills：https://github.com/argyleink/scrollyfills首先需要在终端安装npm包：npmi-Dscrollyfills然后在需要的地方使用scrollend事件：import{scrollend}from'scrollyfills';someElementThatScrolls.addEventListener('scrollend',event=>{console.log('scrollhasended');});polyfill将逐步增强以使用浏览器的内置scrollend事件（如果可用）。如果它不可用，脚本会监视指针事件并滚动以获得可能结束位置的最佳估计。参考：https://developer.chrome.com/blog/scrollend-a-new-javascript-event/
