橫向滾動圖像緩慢渲染

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);