位置：固定，滚动时在移动/平板电脑设备上的性能非常糟糕

Question

我在我的网站中使用position: fixed来修复视图端口中的导航栏，就像facebook的蓝条一样，但是当我们在移动/平板设备上尝试它（具有低处理能力）时-bar对性能的打击非常糟糕，滚动时会产生非常糟糕的用户体验，

我们使用非常好的文章来增强滚动功能，事实上它们确实如此：

• 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

为了在移动设备中平滑滚动，也可以在＆＃34;位置：绝对＆＃34;，

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

-webkit-overflow-scrolling: touch;

Answer 2

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

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

Answer 3

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