CSS 滚动捕捉延迟多长时间？

Posted 2023-03-05

【中文标题】CSS 滚动捕捉延迟多长时间？

【英文标题】：How long is the delay for CSS scroll snap?

【发布时间】：2019-10-15 03:51:05

【问题描述】：

当您在一个启用了某种 CSS 滚动捕捉功能的容器中滚动后，从用户滚动结束到浏览器开始滚动到捕捉位置的延迟时间是多少？

动机

我写了一个answer 来询问CSS Scroll Snap with Animation Effect，我通过将滚动事件回调去抖动250 毫秒来模拟scrollend 事件。这似乎已经足够接近 Chrome 浏览器的真实价值了。但是获得一些一流的价值会很好。甚至可能在某个地方有一个 API，以便我可以通过 JS 获取正确的值。

【问题讨论】：

我遇到了同样的问题并创建了一些似乎可行的东西：***.com/questions/65952068/…

【参考方案1】：

CSS Scroll Snap Module Level 1:

CSS Scroll Snap 模块故意不指定也不强制任何用于强制捕捉位置的精确动画或物理；这由用户代理决定。

我强烈认为大多数支持滚动捕捉的浏览器（例如 Firefox）都使用与 scroll-behavior: smooth; 相同的功能。

CSSWG - Smooth Scrolling:

滚动框使用用户代理定义的计时功能在用户代理定义的时间段内平滑滚动。用户代理应该遵循平台约定，如果有的话。

这意味着不仅浏览器之间、它们的特定版本之间可能存在差异，而且取决于它们所运行的操作系统。另请注意，浏览器可能会也可能不会根据用户设置更改动画（例如，因为accessibility concerns）。

我认为没有 API 可以获取准确的延迟和/或平滑函数。