滚动闪烁问题-使用带有滚动快照类型的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 % 2 fapp % 2 fcdk-virtual-scroll-data-source-example.css src % 2 fapp % 2 fcdk-virtual-scroll-data-source-example.html

帮忙吗?谢谢。

Answer 1

如果你使用cdk-virtual-scroll，你应该定义你的容器和项目的确切像素大小。因为itemSize属性定义了项目的大小。所以在你的代码中，项目的大小是相同的，但在响应大小(不固定使用像素)，但你定义的itemSize是740px。我认为这将是崩溃的cdk-virtual-scroll，以提高您的网站的性能，同时做计算渲染很多项目。

我已经更新了你的代码并添加了属性itemSize,minBufferPx,maxBufferPx:

参见DEMO: StackBlitz

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