我可以做任何关于“滚动重绘”的事情吗？在Chrome中警告“溢出：滚动” DIV

问题描述

在Chrome DevTools中，在渲染下，可以选择显示潜在的滚动瓶颈。

当我启用它时，一些 div 元素我在屏幕上用 overflow：scroll 在顶部显示一个标志，上面写着滚动重画。

我找不到很多有关此功能的文档，我不知道它是否可以实际解决或改进，或者仅仅是事实陈述 - divs有内容，并且他们确实滚动。

解决方案

您可以将此CSS应用于 div with 溢出：scroll 或 overflow：auto 会产生滚动瓶颈。

  transform：translateZ（0）; 
 -webkit-transform：translateZ（0）; 
  

这将强制浏览器创建一个新图层来绘制此元素，并且有时会修复滚动瓶颈（尤其是Webkit）。

In Chrome DevTools, under Rendering, there's an option to "Show potential scroll bottlenecks".

When I enabled this, some div elements I have on the screen with overflow:scroll show a flag at the top saying "repaints on scroll."

I can't find a lot of documentation on this feature, and I don't know whether it's something I can actually fix or improve upon, or just a statement of fact - the divs have content, and they do indeed scroll.

解决方案

You can apply this CSS on the div with overflow: scroll or overflow: auto that create scroll bottlenecks.

transform: translateZ(0);
-webkit-transform: translateZ(0);

That will force the browser to create a new layer to paint this element, and sometimes fix scroll bottlenecks (especially with Webkit).

这篇关于我可以做任何关于“滚动重绘”的事情吗？在Chrome中警告“溢出：滚动” DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！