将滚动条div同步到非滚动的div

Question

我有一个网页,其中有三个div同步在一起.

    +----------+
    |   TOP    |
+---+----------+
|   |         ||
| L | CENTER  ||
|   |_________||
+---+----------+

<!--Rough HTML-->
<div>
  <div class="topbar-wrapper">
    <div class="topbar"></div>
  </div>
  <div class="container">
    <div class="sidebar-wrapper">
      <div class="sidebar"></div>
    </div>
    <div class="center-wrapper"> <!-- Set to the window size & overflow:scroll -->
      <div class="center"></div> <!-- Has the content -->
    </div>
  </div>
</div>

中心div有滚动条,水平和垂直.顶部和左侧div没有滚动条.相反,当移动水平滚动条时,滚动事件会margin-left适当地更新顶部div .同样,当移动垂直滚动条时,margin-top会更新.在这两种情况下,它们都设置为负值.

$('.center-wrapper').scroll(function(e) {
  $('.sidebar').css({marginTop: -1 * $(this).scrollTop()});
  $('.topbar').css({marginLeft: -1 * $(this).scrollLeft()});
});

这在Chrome和Firefox中运行良好.但在Safari中,移动滚动条与正确设置的负边距之间存在延迟.

有一个更好的方法吗？或者有没有办法摆脱Safari的滞后？

编辑:

看看这个小提琴,看看Safari中的滞后:http://jsfiddle.net/qh2K3/

Answer 1

如果这个JSFiddle工作得更好,请告诉我.我也经历了同样的"滞后"(OS X上的Safari 7),这些小的CSS变化显着改善了它.我最好的猜测是,Safari很懒,并没有开启其高性能电机.我们可以使用一些简单的CSS强制Safari打开它:

.topbar-wrapper, .sidebar-wrapper, .center-wrapper {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

这可以通过将一些工作卸载到GPU来实现Safari中的硬件加速CSS.它改进了浏览器中的渲染,这可能是延迟中的问题.