位置：固定，在移动/平板设备上滚动时性能很差

Question

我在我的网站中使用position: fixed 来修复视口中的导航栏，就像 facebook 的蓝条一样，但是当我们在移动/平板设备（处理能力低）上尝试它时，这个固定栏对性能造成非常糟糕的影响，从而在滚动时造成非常糟糕的用户体验，

我们使用了一篇非常好的文章来增强滚动效果，他们确实做到了，比如：

• http://www.html5rocks.com/en/tutorials/speed/scrolling/
• http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
• https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/window-scroll-event.html

在这些文章的基础上进行了大量修改后，我们达到了position: fixed是唯一留给我们增强的调查的地步。

当我们将站点更改为position: absolute 时，该站点的滚动非常流畅。但是修复它后，滚动有一个非常糟糕的缺点，它可以在以某种方式滚动时将 safari 浏览器挂在 ipad 上，您知道如何在平板电脑上使用position: fixed 并具有良好的性能/移动设备？

Answer 1

如果您的“平板电脑/移动设备”有性能问题，有一个 Webkit 引擎，您可能可以在这里找到答案：Chrome slow scrolling with fixed position elements

快速回答：尝试在固定块上添加-webkit-transform: translateZ(0);。

Answer 2

为了在移动设备中获得流畅的滚动，在具有“位置：绝对”的情况下，

你只需要在Div中添加css属性

-webkit-overflow-scrolling: touch;

Answer 3

现在你可以使用“位置：粘性”