Google Chrome并拖动到滚动

Question

我正在开发一个网站：http://www.techniquetolife.com基本上是一个div 5x，和窗口大小的div一样大，在大div中还有其他div，使用超滚动和scrollTo插件来导航。

该网站在Safari和Firefox /X中运行得非常好，但我在Chrome中却遇到了严重的问题。我不确定是否只有Chrome OS/X问题，但是每当我在大div内翻阅一个内部div时，整个浏览器就会慢下来，这只发生在Chrome.

如果我禁用超滚动和使用滚动条，它工作100%好，但我真的想使用超滚动拖动滚动插件。

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

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

Answer 1

好吧，我贴出了一个类似问题的答案，我认为这也可能是相关的。我可能错了，但你可以试一试。

请看完整的问题和我的完整答案：Chrome slow scrolling with fixed position elements

问题及如何监控

之所以如此，是因为Chrome出于某些原因决定，当固定面板经过它时，它需要对任何图像进行解码和调整大小。你可以很好地看到这一点

->检查元素->时间线->框架 ►触底记录 ►返回到页面并上下拖动滚动条

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

更糟糕的是，您甚至不能通过在可滚动div之上创建div来避免使用position:fixed属性来解决这个问题。这实际上会产生同样的效果。Chrome在很大程度上说，如果页面上的任何内容必须绘制在图像上(即使是在iframe、div或任何可能的图像中)，请重新绘制该图像。因此，不管您正在滚动的是什么div/框架，问题仍然存在。

简易黑客解决方案

但我确实找到了一种解决这个问题的方法，到目前为止似乎没有什么坏处。通过添加

-webkit-transform: translateZ(0); 

到你的固定面板，把这个div放在它自己的合成层中。