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个项目（每个高度50像素），可以将minBufferPx设置为250px（5个项目），将maxBufferPx设置为500px（10个项目），当用户滚动并且少于5个项目（240px）被缓冲时，它将加载另外6个项目（> 500px）。这样做的缺点是会消耗更多的CPU。