Angular虚拟滚动minBufferPx、maxBufferPx未生效及无限滚动实现问题问询

问题1：对minBufferPx和maxBufferPx的理解是否有误？ #

你对两个参数的规则理解是正确的，出现不符合预期的效果核心是两个配置没有实际生效：
Angular模板中不加[]的属性会直接传递字符串，你写的minBufferPx="64*20"实际传递给组件的是"64*20"这个字符串，而非计算后的数值1280，虚拟滚动组件识别到无效数值后会默认使用仅覆盖视口的缓冲区大小，所以你会看到渲染范围的条目数永远等于可见窗口可容纳的9条。
另外还有一个场景会导致buffer配置不生效：当前已加载的数据总量不足以覆盖buffer要求的渲染范围时，getRenderedRange().end最多等于已加载数据总长度，不会延伸到不存在的条目上。

问题2：为什么配置没有体现在getRenderedRange().end的返回值中？ #

除了上述属性绑定错误的原因外，你用的加载判断逻辑end === total本身也会抑制buffer生效：当已加载数据全部渲染完才触发下一批请求，此时没有更多数据可用来填充缓冲区，自然看不到buffer配置对应的扩展渲染范围。

问题3：如何实现适配窗口变化的合理无限滚动加载逻辑？ #

第一步：修正属性绑定

首先给buffer参数加上方括号，让表达式正确计算为数值：

<cdk-virtual-scroll-viewport
  itemSize="64"
  [minBufferPx]="64 * 20"
  [maxBufferPx]="64 * 35"
  (renderedRangeChange)="onRenderedRangeChange($event)"
>
  <!-- 条目渲染逻辑 -->
</cdk-virtual-scroll-viewport>

第二步：改用渲染范围监听+动态阈值判断

不要硬编码预加载条数，基于视口尺寸动态计算预加载阈值，同时添加请求锁避免重复触发：

private readonly itemSize = 64;
// 预留1.5屏的预加载空间，可根据业务调整
private readonly preloadScreenFactor = 1.5;
private isLoading = false;
private previousRange: CdkVirtualScrollViewportRange;

onRenderedRangeChange(range: CdkVirtualScrollViewportRange) {
  // 仅处理向下滚动的场景
  if (this.previousRange && range.end <= this.previousRange.end) {
    this.previousRange = range;
    return;
  }

  const viewportHeight = this.scrollViewPort.getViewportSize().height;
  // 计算单屏可容纳的条目数
  const perScreenCount = Math.ceil(viewportHeight / this.itemSize);
  // 动态计算预加载阈值
  const preloadThreshold = perScreenCount * this.preloadScreenFactor;

  // 剩余未渲染的已加载数据少于阈值时触发下一批请求
  const remainingData = this.scrollViewPort.getDataLength() - range.end;
  if (remainingData <= preloadThreshold && !this.isLoading) {
    this.isLoading = true;
    this.getNextBatch().subscribe({
      next: () => this.isLoading = false,
      error: () => this.isLoading = false
    });
  }

  this.previousRange = range;
}

该实现会自动适配窗口大小变化，窗口调整后getViewportSize()会返回新的视口高度，预加载阈值也会同步更新，不会出现硬编码常量导致的适配问题。

内容的提问来源于stack exchange，提问作者rodent_la