Question

在我的React应用中：

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

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

我的代码有点像这样：

CSS

.sliderContainer {
    overflow: hidden
}

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

由React组件呈现的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

我需要搜索＆＃34;重拍＆＃34;而不是＆＃34;重新渲染＆＃34;。

允许更流畅滚动的解决方案是给.slider div以下css属性：

transform: translateZ(0);

侧滚动图像渲染缓慢

1 个答案: