Google Chrome浏览器并拖动滚动 [英] Google Chrome and drag to scroll

问题描述

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

I am developing a website: http://www.techniquetolife.com It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.

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

The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...

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

If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.

我不擅长编码，因此不胜感激.

I am no good at coding so any help would be greatly appreciated.

所有插件/浏览器均为最新版本.

All of the plugins / browsers are on the latest version.

推荐答案

好吧，好吧，我发布了一个类似问题的答案，我认为这也可能是相关的.虽然我可能是错的，但是您可以对其进行测试.

Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.

在此处查看完整问题和完整答案: Chrome使用固定位置元素缓慢滚动

See the full question and my full answer here: Chrome slow scrolling with fixed position elements

这样做的原因是，由于固定原因，Chrome出于某些原因决定需要重新编码和调整图像大小.

The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with

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

► Right Click Page -> Inspect Element -> Timeline -> Frames

►命中记录位于底部

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

► Go back to the page and drag scrollbar up and down

Chrome用来确定是否需要重新绘制下部元素的方法似乎只是问题.

This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.

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

To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.

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

But I did find one hack to get around this issue that seems to have no downside as of now. By adding

-webkit-transform: translateZ(0); 

将您的div放在其自己的合成层中.

To your fixed panel, putting that div in its own compositing layer.

这篇关于Google Chrome浏览器并拖动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！