Question

这个page使用一些JS来阻止左侧面板的顶部滚过视口的顶部边界。¹

在Chrome 31和Firefox 25下，当左侧面板滚动到包含div的顶部时，左侧面板保持坚如磐石，但在其他浏览器（例如IE 11和Safari 6）中，左侧面板“弹跳”垂直滚动。（滚动停止后，左侧面板的位置稳定。）

这是负责此效果的JS / jQuery代码：

  (function () {
     var w = $(window),
         lc = $('.left-panel');

     w.scroll(function () {
       var st = w.scrollTop(),
           ot = lc.offset().top;
       $('.vfloat').css('top', Math.max(0, st - ot));
     });

  }());

问题：如何消除左侧div的这种不必要的“反弹”？

编辑：清理并简化了代码段。

_{¹为了使这种效果成为可能，您可能需要调整窗口的垂直尺寸，以便足够的右侧面板落在视口之外。}

Answer 1

这是每个浏览器触发滚动事件的方式。您使用非常昂贵的height计算并导致网页重排，这取决于浏览器如何处理它。

我可以为您推荐2种可以解决您问题的方法：

1）只需使用jQuery动画来改变左侧div的位置，这样位置就会平滑变化，甚至可以使用非常快的速度。如果您不想使用jQuery，您可以通过编写自己的代码并使用计时器来平滑地更改顶部位置甚至css3动画来模拟相同的行为。

2）第二种方式（我认为这是首选方式）在这种情况下不使用javascript进行位置操作，并且仅在某些条件下使用javascript将position: fixed类分配给左侧容器。它仍会导致回流，但滚动事件不会造成延迟。

解决方案1 - 使用css3过渡和jQuery进行平滑动画：http://jsfiddle.net/6bYhx/4/（使用jQuery.animate（）可以实现相同的目标）

解决方案2 - 使用position: fixed和addClass（由于滚动事件被延迟，IE的问题仍然存在）：http://jsfiddle.net/S5Sgu/

所以我认为最佳解决方案是平滑动画（技术1）并进行一些修改。

如何消除滚动跳动？

1 个答案: