angular-cdk - cdk-virtual-scroll-viewport,当用户快速滚动时，有什么办法可以解决空白区域？

Question

在移动端尤其明显。只要用户滚动，它就会立即刷新，如果用户快速滚动，很难渲染？

Answer 1

您可以将 减少itemSize到一个较低的数字，这应该会诱使滚动条在当前可视区域的上方/下方呈现更多行。

这应该可以让您滚动得更快，但也需要更多的 CPU 才能运行。

例如：把这个改成 <cdk-virtual-scroll-viewport itemSize="50"> 这个 <cdk-virtual-scroll-viewport itemSize="10">

Answer 2

您可以使用 minBufferPx 和 maxBufferPx 来减少空白空间，顾名思义，您可以缓冲列表以便用户看到更少的空白空间，例如您一次显示 5 个项目（每个项目 50px 高度），您可以设置 minBufferPx到 250px（5 个项目）和 maxBufferPx 到 500px（10 个项目），当用户滚动并且缓冲少于 5 个项目（240px）时，它将加载另外 6 个项目（>500px）。这样做的缺点是它消耗更多的CPU。