Question

自从FF 52推出以来，我在执行滚动事件时遇到了相同的滞后问题，特别是在使用鼠标滚轮时 - 同样的事情也出现在IE Edge上，但它被认为是少数，现在有了添加FF必须找到某种解决方案。

我创建了一个在线复制问题的小提琴 - 这个问题在FF和IE边缘可见，而它可以在webkit浏览器中顺利运行。

这是我正在使用的简单滚动功能：

$('.scrollable').on('scroll', function() {
  scrollY = $(this).scrollTop();
  $(this).find('td:first-child span').attr('style', 'transform:translateY(' + -scrollY + 'px)');
})

https://jsfiddle.net/nfmLa7mn/3/

如果使用鼠标滚轮滚动，则问题更明显。这是一个小滞后，但它就在那里。在更复杂的布局中，问题更加明显。

我是唯一一个被这个打扰的人吗？我没有在网上看到任何其他类似的主题。有什么方法我不知道可以更好地发射滚动事件吗？或者还有其他方法解决这个问题吗？

Answer 1

也许这是由于Firefox处理异步滚动的事实。

https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

通常通过侦听滚动事件然后以某种方式更新页面上的元素（通常是CSS位置或转换属性）来实现滚动效果。[...]

这些效果适用于在浏览器主线程上同步滚动的浏览器。但是，大多数浏览器现在支持某种异步滚动，以便为用户提供每秒60帧的一致体验。在异步滚动模型中，可视滚动位置在合成器线程中更新，并且在DOM中更新滚动事件并在主线程上触发之前对用户可见。这意味着实现的效果将落后于用户看到滚动位置的效果。这可能会导致效果变得迟钝，笨拙或紧张 - 简而言之，我们想要避免这种情况。

Firefox 52 javascript滚动火灾事件滞后

1 个答案: