0

我正在开发一个网站：http ://www.techniquetolife.com 它基本上是一个 5 倍于窗口大小的 div 内的窗口的 div，其他 div 在大 div 内，使用 overscroll 和 scrollTo 插件进行导航。

该网站在 Safari 和 Firefox for OS/X 中运行良好。但是我很难让它在 Chrome 中工作。我不确定这是否只是 Chrome OS/X 的问题，但是每当我滚动到大 div 中的一个内部 div 时，整个浏览器都会变慢，这只发生在 Chrome 中......

如果我禁用过度滚动并使用滚动条，它可以 100% 正常工作，但我真的想使用过度滚动拖动来滚动插件。

我不擅长编码，所以任何帮助将不胜感激。

所有插件/浏览器都在最新版本。

4

1 回答 1

1

好的，我发布了一个类似问题的答案，我认为这也可能相关。虽然我可能是错的，但你可以测试它。

在这里查看完整的问题和我的完整答案：Chrome slow scrolling with fixed position elements

问题以及如何监控

这样做的原因是因为 Chrome 出于某些原因决定在固定面板越过它时需要重新解码和调整任何图像的大小。你可以特别清楚地看到这一点

► 右键单击​​页面 -> 检查元素 -> 时间线 -> 帧

► 点击底部记录

► 返回页面并上下拖动滚动条

这似乎只是 Chrome 用来确定是否需要重新绘制较低元素的方法的问题。

更糟糕的是，您甚至无法通过在可滚动 div 上方创建 div 来避免使用该position:fixed属性来解决此问题。这实际上会产生同样的效果。几乎 Chrome 说如果页面上的任何内容必须在图像上绘制（即使在 iframe、div 或任何可能的内容中），请重新绘制该图像。因此，尽管您正在滚动它的 div/frame，问题仍然存在。

简单的黑客解决方案

但我确实找到了一个解决这个问题的方法，到目前为止似乎没有任何缺点。通过添加

-webkit-transform: translateZ(0);

对于您的固定面板，将该 div 放在它自己的合成层中。

于 2013-02-28T23:26:18.943 回答