CDK虚拟滚动maxBufferPx问题：无法显示完整列表

• 明确buffer属性的约束逻辑
  CDK虚拟滚动要求maxBufferPx必须大于等于minBufferPx，这是硬性规则，不满足就会触发你看到的Error: CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx报错。

• 修复列表显示不全的问题
  你设置固定值minBufferPx=500、maxBufferPx=1000后显示少量项，核心原因是固定缓冲值和列表项实际高度不匹配，导致虚拟滚动认为只需要加载少量项就能满足缓冲要求。解决思路：

  1. 基于项高度动态计算缓冲值：先获取单个列表项的实际高度，再乘以需要预留的缓冲项数（比如5项、10项），示例代码：

     // 假设列表项类名为list-item
     const itemHeight = document.querySelector('.list-item')?.getBoundingClientRect().height || 60;
     this.minBufferPx = itemHeight * 5;
     this.maxBufferPx = itemHeight * 10;
     

  2. 指定itemSize辅助计算：如果列表项高度固定或有预估高度，给cdk-virtual-scroll-viewport添加itemSize属性，帮助虚拟滚动更精准地计算可视范围和缓冲项数：

     <cdk-virtual-scroll-viewport itemSize="60" [minBufferPx]="minBufferPx" [maxBufferPx]="maxBufferPx">
       <div *cdkVirtualFor="let item of items" class="list-item">{{item}}</div>
     </cdk-virtual-scroll-viewport>
     

• 简化配置的可选方案
  如果不需要精细控制预加载的上限，完全可以只配置minBufferPx，CDK会自动根据滚动行为调整最大缓冲范围，这样既保证滚动流畅，又能避免因配置不当导致的显示异常。

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