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

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

为了在移动设备中获得平滑滚动,当具有"位置:绝对"时,

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

-webkit-overflow-scrolling: touch;

Answer 2

如果你的"平板电脑/移动设备"有性能问题,有一个Webkit引擎,你可能会在这里找到答案:Chrome使用固定位置元素慢速滚动

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