滚动闪烁问题 - 使用scroll-snap型的CDK-Virtual-Scroll

Question

我正在使用 cdk-virtual-scroll 。

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

当我使用滚动snap-type 时，它会闪烁几秒钟。我附上了代码样本 https://stackblitz.com/edit/Edit/Angular-gular-gchlgl?file=src%2fstyles.scss.scss，scs，src，src%2fapp； scroll-data-source-example.css，src％2FAPP％2fcdk-virtual-scroll-scroll-data-source-example.html

有帮助吗？谢谢。

Answer 1

如果您使用的是 cdk-virtual-scroll ，则应定义容器和物品的精确像素大小。因为 itextize 属性正在定义项目的大小。因此，在您的代码中，项目的大小相同，但响应大小（未使用像素固定），但您定义 itextize 为740px。我认为这将崩溃 cdk-virtual-scroll ，以提高网站的性能，同时计算渲染很多项目。

我已经更新您的代码并添加属性 itextize ， minbufferpx ， maxBufferpx ：

请参阅demo：

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

stackblitz 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;
}