html - 滚动闪烁问题 - 使用带有滚动捕捉类型的 cdk-virtual-scroll

Question

我正在使用cdk-virtual-scroll .

它在不使用 css 属性 scroll-snap-type 的情况下工作正常。

当我使用scroll-snap-type时，它会闪烁几秒钟。我附上了代码示例 https://stackblitz.com/edit/angular-gchlgl?file=src%2Fstyles.scss,src%2Fapp%2Fcdk-virtual-scroll-data-source-example.css,src%2Fapp%2Fcdk-virtual-scroll-data-source-example.html

有什么帮助吗？谢谢。

Answer 1

如果您使用cdk-virtual-scroll，您应该定义容器和元素的确切像素大小。因为 itemSize 属性定义了元素的大小。因此，在您的代码中，元素的大小相同，但采用响应式大小(不使用像素固定)，但您将 itemSize 定义为 740px。我认为这会导致 cdk-virtual-scroll 崩溃，以提高网站的性能，同时进行渲染大量元素的计算。

我已更新您的代码并添加属性 itemSize、minBufferPx、maxBufferPx:

查看演示:StackBlitz

HTML

<cdk-virtual-scroll-viewport
  itemSize="500"
  class="example-viewport"
  minBufferPx="1000"
  maxBufferPx="5000"
>
  <div *cdkVirtualFor="let item of ds" class="example-item">
    <div class="info">{{item}}</div>
    <img
      src="https://images.pexels.com/photos/7913028/pexels-photo-7913028.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load"
      alt="Girl in a jacket"
    />
  </div>
</cdk-virtual-scroll-viewport>

并将一些响应式 CSS 属性更新为固定大小:

CSS

.example-viewport {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  width: 100%;
  height: 500px; /* updated from 100vh */
}

.example-item {
  height: 500px; /* updated from 100vh */
  scroll-snap-align: start;
  margin: 0 !important;
  padding: 0 10px !important;
  position: relative;
}

.info {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #0000008a;
  height: 25px;
  border-radius: 50px;
  padding: 0 10px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 0 12px;
}

img {
  height: 500px; /* updated from 100vh */
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
}