javascript - 将滚动条 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 没有滚动条。相反，当移动水平滚动条时，滚动事件会适本地更新顶部 div 的 margin-left。同样，当移动垂直滚动条时，margin-top 也会更新。在这两种情况下，它们都设置为负值。

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

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

有更好的方法吗？或者有什么方法可以消除 Safari 中的延迟？

编辑:

查看此 Fiddle 以查看 Safari 中的延迟:http://jsfiddle.net/qh2K3/

Answer 1

如果 this 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;
}

这会启用 hardware accelerated CSS在 Safari 中通过将一些工作卸载到 GPU。它改进了浏览器中的呈现，这可能是延迟的问题。