javascript - 使用 jQuery 平滑跨浏览器对角滚动

Question

根据页面的垂直滚动，我水平移动一个<div>调用container：

scrollElement.scroll(function() {
    var offsetLeft = scrollElement.scrollTop() / x;
    container.css({ left: offsetLeft  + 'px' });
});

当用户垂直滚动时，这成功地创建了对角滚动效果。

滚动在 Firefox 中几乎无法接受，但在 Google Chrome 中却非常不稳定：当您滚动太快时，Chrome 无法同步 x 轴和 y 轴上的移动，因此首先向下滚动然后调整 x 偏移量。但是，当您滚动得太快时，Firefox 就会滞后。

有没有更好的方法来实现这种“对角滚动”？有没有可能让它更流畅？

我基本上希望 div 在不每次都更正 x 坐标的情况下不要向下滚动太多。

Answer 1

您可以将其作为动画尝试，而不是直接为容器偏移设置 CSS。

scrollElement.scroll(function() {
  var offsetLeft = scrollElement.scrollTop() / x;

  container.stop(true, false); // Stop the current animation, likely
                               // caused by a previous scroll event fire.
  container.animate({ left: offsetLeft  + 'px' });
});