Angular Material Virtual Scroll滚动时跳动且自动跳至末尾如何解决

核心故障原因 #

Angular CDK虚拟滚动的位置计算完全依赖itemSize、容器尺寸、列表项引用三个核心参数，任意参数不符合预期都会导致偏移计算异常，触发索引跳动、滚动错位。

排查&修复步骤 #

• 排查1：[itemSize]配置与实际列表项高度不匹配
  CDK默认用固定高度策略计算滚动偏移，你设置的ITEM_SIZE必须和.input-field-container的实际渲染高度完全一致，padding、border、外边距都要计入总高度。
  修复方案：
  1. 给列表项加上box-sizing: border-box，确保内边距、边框被算入元素设置的高度
  2. 用浏览器调试工具查看实际列表项的渲染总高度，将ITEM_SIZE修改为对应数值，确保误差不超过1px
• 排查2：列表数组elemtArray引用意外变更
  *cdkVirtualFor默认按数组引用追踪元素，如果滚动过程中elemtArray被重新赋值（哪怕内容完全一致，只要是新的数组引用），CDK会判定列表已刷新，重新计算滚动位置导致跳转。
  修复方案：
  1. 排查所有修改elemtArray的逻辑，避免全量替换数组引用，单个元素更新用不可变修改单条的方式实现
  2. 给*cdkVirtualFor添加trackBy函数，按元素唯一标识追踪项，不受数组引用变更影响：
     组件代码：

  trackByElem(index: number, elem: any) {
    // 元素有唯一业务ID优先用ID，无唯一标识再用索引
    return elem.id ?? index;
  }
  

  模板修改：

  <div *cdkVirtualFor="let elem of elemtArray; trackBy: trackByElem" class="input-field-container ">
  

• 排查3：虚拟滚动容器未设置固定高度
  cdk-virtual-scroll-viewport必须设置明确的固定高度，否则容器高度会随渲染项动态变化，导致滚动计算逻辑混乱。
  修复方案：给.my-virtual添加固定高度配置：

  .my-virtual {
    height: 600px; /* 可根据业务调整为vh、calc等确定数值，不可用百分比、auto */
    width: 100%;
  }
  

• 排查4：列表项高度动态变化
  如果列表项内部存在异步加载内容（如图片、动态渲染的富文本）、展开收起逻辑，会导致渲染后高度和预设的itemSize不一致。
  修复方案：
  1. 确保异步内容加载完成后再给elemtArray赋值，初始化虚拟滚动
  2. 若业务需要支持动态高度，切换CDK虚拟滚动为动态高度策略，替换固定itemSize的默认策略
• 排查5：scrolled回调存在滚动位置操作逻辑
  检查scrolled方法内是否调用了scrollToIndex、修改滚动偏移等操作，逻辑错误会触发滚动索引来回跳动的死循环，最终滚到列表末尾。如果有相关逻辑需要调整触发条件，避免滚动过程中重复触发位置修改。

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