Scrollend（一种新的 JavaScript 事件）

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

Adam Argyle
Adam Argyle
X GitHub

在 scrollend 事件发生之前，没有可靠的方法来检测滚动行为 已完成。这意味着事件会延迟触发，或在用户手指 仍然位于屏幕上由于了解滚动操作的时间 会导致错误并给用户带来糟糕的体验。

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

此 setTimeout() 策略能做到最好，就是了解滚动操作是否已在 100ms。这更像是滚动已暂停事件，而不是滚动 活动已结束。

在 scrollend 事件，浏览器会为您执行所有这些高难度的评估。

之后
document.onscrollend = event => {…}

这才是好事。恰到好处地把握时间，充分满足有意义的条件 然后再发出信号

浏览器支持

  • Chrome：114。 <ph type="x-smartling-placeholder">
  • 边缘：114。 <ph type="x-smartling-placeholder">
  • Firefox：109。 <ph type="x-smartling-placeholder">
  • Safari：不支持。 <ph type="x-smartling-placeholder">

来源

试试看！

活动详情

在以下情况下会触发 scrollend 事件： - 浏览器不再以动画形式显示滚动或平移滚动。 - 用户的触摸已释放。 - 用户的指针已释放滚动拇指。 - 用户的按键已释放。 - 已完成滚动到片段。 - 滚动贴靠已完成。 - scrollTo() 已完成。 - 用户已滚动视觉视口。

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

这个事件之所以要在 Web 平台上花费这么长的时间，是因为 这些小细节需要规范详细信息这是最复杂的领域之一 阐明了视觉视口的 scrollend 细节 与文档进行对比以某个您放大的网页为例。您可以滚动浏览 而且无需滚动地图 文档。请放心，即使是由用户驱动的可见视口滚动 互动会在完成后发出 scrollend 事件。

使用事件

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

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

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

或者使用事件属性：

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 和实现指导。