我有一个包含三个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/
让我知道这个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。它可以改善浏览器中的渲染，这可能是延迟中的问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句