我正在开发一个网站:http://www.techniquetolife.com 它基本上是一个与窗口大小的div内部窗口一样大的div,与大div中的其他div一样大,使用overscroll和scrollTo插件进行导航。
该网站在Safari和Firefox for OS / X中运行良好。但是我在使用Chrome时遇到了麻烦。我不确定这是否只是Chrome OS / X的问题,但每当我滚动大div中的一个内部div时,整个浏览器都会变慢,这只发生在Chrome中......
如果我禁用过度滚动并使用滚动条,它可以100%正常工作,但我真的想用滚动拖动来滚动插件。
我不擅长编码所以非常感谢任何帮助。
所有插件/浏览器都是最新版本。
答案 0 :(得分:1)
好吧,我发布了一个类似问题的答案,我认为这也可能是相关的。我可能错了,但你可以测试一下。
请在此处查看完整问题和完整答案:Chrome slow scrolling with fixed position elements
之所以如此,是因为Chrome出于某些原因决定在固定面板越过它时需要重新编码和调整任何图像的大小。
你可以很好地看到这一点►右键单击页面 - >检查元素 - >时间表 - >框架
►点击底部记录
►返回页面并上下拖动滚动条
这似乎只是Chrome用于确定是否需要重新绘制较低元素的方法的问题。
更糟糕的是,您甚至无法通过在可滚动div上方创建div来避免使用position:fixed
属性。这实际上会产生同样的效果。几乎Chrome都说如果页面上的任何内容都必须在图像上绘制(即使在iframe,div或其他任何内容中),请重新绘制该图像。因此,尽管您正在滚动它的div / frame,问题仍然存在。
但我确实找到了一个解决这个问题的黑客,这个问题目前似乎没有任何不利因素。添加
-webkit-transform: translateZ(0);
将固定面板放在自己的合成图层中。