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' });
});

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

1 个答案: