使用 jQuery 平滑跨浏览器对角滚动答案

【问题标题】：Smooth cross-browser diagonal scrolling with jQuery使用 jQuery 平滑跨浏览器对角滚动
【发布时间】：2013-05-10 06:31:12
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： javascript jquery google-chrome firefox scroll

【解决方案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' });
});

【讨论】：

谢谢。不幸的是，这加剧了先向下滚动然后向左滚动的效果。我正在寻找一种方法来同步这些动作。