应用错误收集

我为这个问题创造了一个小提琴：https://jsfiddle.net/alinnert/wcz7qm9u/

在这个小提琴中有两个要素：

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

在Chrome中看起来完全没问题。但是在IE，Edge和Firefox中，当我滚动时，它的位置略微“落后”。滚动完成后，位置是正确的。但似乎计算后的渲染发生得太晚了。

是否有解释为何以及为何会发生这种情况？在这些浏览器中我能做些什么吗？

网络上有那些视差滚动脚本。他们的工作方式完全相同。只是你没有注意到视差滚动的影响吗？

编辑以更好地理解问题：我滚动示例并同时截取屏幕截图。

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

这是FF 46中引入的一项功能。

基本上这也可能发生在Chrome和其他浏览器中（虽然在Chrome中它只发生一次）有时和b）只有一帧中的1000帧。）

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

主要解决方案是将滚动渲染与主线程分离。如您所知，JS在主线程中执行，因此导致JS（主线程）和可视滚动（特殊组合线程）不同步。

您可以通过简单fixing一切来解决此问题，而不是为transform x属性设置动画。也许挂钩wheel事件可能会有所帮助。（使用wheel会部分破坏滚动渲染的高性能异性（这就是被动事件监听器所引入的原因）。