横向滚动图像缓慢渲染

Question

在我的React应用程序中：

我有一个包含图像的React组件的侧滚动滑块。用户可以使用标准的overflow: scroll CSS机制向左和向右滚动。

当视口狭窄并且用户快速滚动时，滑动到视图中的元素在呈现之前在可观的时间内不可见。我试图阻止事情的React方面重新渲染任何东西，并且似乎组件不会重新渲染。这有不是解决了这个问题。

我的代码是有点像这样：

CSS

.sliderContainer { 
    overflow: hidden 
} 

.slider { 
    display: flex; 
    height: 400px; 
    overflow-x: scroll; 
} 

HTML由阵营组件呈现：

<div class="sliderContainer"> 
    <div class="slider"> 
    // this contains many (20+) components similar to this: 
     <div class="contentComponent"> 
      <img class="contentImage" /> 
      <img class="authorImage" /> 
      <p>some text</p> 
     </div> 
    </div> 
</div> 

所以我的问题是这样的：
是否快速副作用滚动总是导致滚动项目缓慢渲染？如果没有，可能会导致这种影响，我该如何预防它？

Answer 1

我发现在这个问题的解决方案： Can I do anything about "repaints on scroll" warning in Chrome for "overflow:scroll" div

我需要搜索“重绘”，而不是“重新渲染”。

的解决方案，让更多的流体滚动，就是给.slider DIV以下CSS属性：

transform: translateZ(0);