Scrollend（一种新的 JavaScript 事件）

删除超时函数并摆脱其 bug，您真正需要的是：scrollend 事件。

Adam Argyle

在 scrollend 事件之前，没有可靠的方法来检测滚动是否已完成。这意味着事件会延迟触发，或者在用户的手指仍按在屏幕上时触发。这种无法确定滚动何时实际结束的不确定性导致了 bug 和用户体验不佳。

之前

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

此 setTimeout() 策略能做的最多就是知道 100ms 是否已停止滚动。这更像是滚动已暂停事件，而不是滚动已结束事件。

在 scrollend 事件之后，浏览器会为您完成所有这些复杂的评估。

之后

document.onscrollend = event => {…}

太好了。在发射之前，时间安排得当且包含大量有意义的条件。

浏览器支持

• 114
• 114
• 109
• x

来源

试试看！

活动详情

在以下情况下，系统会触发 scrollend 事件： - 浏览器不再执行滚动动画或滚动平移。 - 用户已松开手指。 - 用户的指针已释放滚动滑块。 - 用户的按键操作已释放。 - 滚动到 fragment 已完成。 - 滚动贴靠已完成。 - scrollTo() 已完成。 - 用户滚动了视觉视口。

在以下情况下，系统不会触发 scrollend 事件： - 用户的手势未导致任何滚动位置变化（未发生平移）。- scrollTo() 未产生任何翻译结果。

此事件之所以花了这么长时间才在 Web 平台上推出，是因为需要规范许多小细节。最复杂的方面之一是阐明视觉视口与文档的 scrollend 详细信息。假设您正在放大某个网页。在这种放大状态下，您可以滚动浏览，但不一定是滚动文档。请放心，即使这种由用户驱动的视觉视口滚动互动在完成后也会发出 scrollend 事件。

使用该事件

与其他滚动事件一样，您可以通过多种方式注册监听器。

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

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

或者，使用 event 属性：

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

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

polyfill 和渐进增强

如果您现在就想使用以下新事件，请参考以下建议。您可以继续使用当前的滚动到底策略（如果有），并在开始时通过以下方式检查支持情况：

'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 事件可用于触发各种操作。一个常见用例是将关联的界面元素与滚动停止的位置同步。例如： - 将轮播界面滚动位置与圆点指示器同步。 - 将图库项与其元数据同步。 - 在用户滚动到新标签页后提取数据。

假设用户滑动关闭电子邮件。用户滑动结束后，您可以根据用户滚动到的位置执行操作。

您还可以使用此事件在程序化滚动或用户滚动后进行同步，或执行日志记录分析等操作。

下面是一个很好的示例，其中需要根据滚动位置更新多个元素（例如箭头、圆点和焦点）。观看我如何在 YouTube 上制作此轮播界面。此外，您还可以试用实时演示版。

感谢 Mehdi Kazemi 在该功能的工程方面所做的工作，同时也感谢 Robert Flack 提供 API 和实现方面的指导。