javascript - Firefox 52 javascript 滚动触发事件滞后

Question

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

我在网上创建了一个 fiddle 来重现这个问题 - 这个问题在 FF 和 IE edge 上是可见的，但它在 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

Often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the CSS position or transform property.) [...]

These effects work well in browsers where the scrolling is done synchronously on the browser's main thread. However, most browsers now support some sort of asynchronous scrolling in order to provide a consistent 60 frames per second experience to the user. In the asynchronous scrolling model, the visual scroll position is updated in the compositor thread and is visible to the user before the scroll event is updated in the DOM and fired on the main thread. This means that the effects implemented will lag a little bit behind what the user sees the scroll position to be. This can cause the effect to be laggy, janky, or jittery — in short, something we want to avoid.