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

Question

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

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

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

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

score 7 · Accepted Answer

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

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

score 7 · Accepted Answer

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

你只需要将css属性添加到Div

-webkit-overflow-scrolling: touch;

score 2 · Accepted Answer

2

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

于 2020-07-24T17:34:37.143 回答

3 回答 3