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。

Answer 3

我遇到了一些类似的问题并遇到了这些：

https://github.com/angular/components/issues/24943

https://github.com/angular/components/issues/20971

第二期中还链接了一个 stackblitz ，并在

cdk-virtual-scroll-viewport

之外进行了以下 hacky 修复：

<div style="position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none"></div>

Answer 4

尝试在

templateCacheSize: 30

中使用

*cdkVirtualFor

。 如果不起作用，请尝试更大的值。

Answer 5

您可以使用滚动方法并处理最大高度。空白是因为虚拟滚动最大高度和变换

<cdk-virtual-scroll-viewport (scroll)="removeSpaceOnScroll()" autosize>

removeSpaceOnScroll() {
this.cdkText = document.getElementById('infoTextForCDK')
let spacer = document.querySelector('.cdk-virtual-scroll-spacer')
let displyText = window.getComputedStyle(this.cdkText).opacity
if (displyText === "0.5") {
  this.getTranslateCDK = document.querySelector('.cdk-virtual-scroll-content-wrapper')
  let setMaxHeight = this.getTranslateCDK.style.transform.replace(/[^\d\.]*/g, '') * 1
  this.renderer.setStyle(spacer, 'max-height', `${setMaxHeight}px`);
} else {
  this.renderer.setStyle(spacer, 'max-height', 'unset')
}

}