滚动中固定元素的更新位置仅在 IE 和 Firefox 中略微滞后

Update position of fixed element on scroll is slightly behind in IE and Firefox only

我为这个问题创建了一个fiddle：https://jsfiddle.net/alinnert/wcz7qm9u/

在这个fiddle中有两个元素：

我正在使用 requestAnimationFrame() 来更新固定元素的位置。我试着把它放在与段落完全相同的 Y 坐标上。这只是一个演示问题的简化示例。

在 Chrome 中看起来完全没问题。但在 IE、Edge 和 Firefox 中，当我滚动时，位置略微 "behind"。在我完成滚动后，位置是正确的。但是计算出来之后的渲染似乎来不及了。

是否有关于如何以及为什么会发生这种情况的解释？我可以在上述浏览器中做些什么吗？

网络上有那些视差滚动脚本。它们的工作方式完全相同。只是您没有注意到视差滚动的效果吗？

编辑为了更好地理解问题：我滚动了示例并同时截图了。

这是在很短的时间内看起来的样子。如果我向另一个方向滚动，则固定元素在段落上方而不是下方可见。

这是 FF 46 中引入的功能。

基本上这也可能发生在 Chrome 和其他浏览器中（尽管在 Chrome 中它只发生 a) 有时和 b) 1000 帧中只有一帧。）

scroll 事件并没有真正与滚动的真实呈现同步。 oldschool 滚动事件确实与视觉滚动同步。但特别是对于移动设备来说，很难有一个与 JS 同步的高性能 scroll 渲染，包括 scroll 事件。

主要解决方案是将滚动渲染与主线程分离。众所周知，JS是在主线程中执行的，因此导致JS（主线程）和视觉滚动（一种特殊的合成线程）不同步。

您可以通过简单地 fixing 一切而不是动画变换 x 属性来解决这个问题。也许挂钩 wheel 事件也可能有所帮助。（使用 wheel 部分破坏了滚动渲染的高性能异步特性（这就是引入被动事件侦听器的原因）。