Angular CDK虚拟滚动自定义滚动条样式后出现滚动卡顿问题

我之前在项目里用CDK虚拟滚动加自定义滚动条的时候，也碰到过类似的卡顿和原生滚动条闪烁问题，结合你的情况，整理了几个排查和解决的方向：

1. 简化自定义滚动条样式，避免干扰原生滚动优化 #

CDK虚拟滚动完全依赖浏览器的原生滚动事件来计算视口内的元素渲染范围，复杂的自定义滚动条样式很容易打破这种优化。比如带有transition、复杂box-shadow或者transform的滚动条，会强制浏览器频繁重排重绘，导致虚拟滚动的位置计算延迟，滚动自然就卡顿了。

具体优化建议：

• 精简滚动条样式，只保留必要的外观调整
• 给滚动容器添加will-change: scroll-position，提示浏览器提前对滚动操作做渲染优化：

cdk-virtual-scroll-viewport {
  will-change: scroll-position;
  overflow-y: auto;

  /* 精简后的自定义滚动条样式示例 */
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 4px;
    background-clip: content-box;
    border: 2px solid transparent;
  }
}

2. 解决原生滚动条闪烁问题 #

闪烁通常是因为自定义滚动条没有完全覆盖原生滚动条，或者容器的overflow属性设置导致浏览器在原生和自定义滚动条之间反复切换渲染。

解决步骤：

• 确保滚动容器的overflow-y统一设置为auto（不要动态切换）
• 给滚动条轨道设置透明背景，彻底隐藏原生轨道的视觉效果
• 通过background-clip: content-box让滚动条thumb的样式更精准，避免和容器背景混淆

3. 优化CDK虚拟滚动的配置参数 #

有时候卡顿的根源不是滚动条，而是虚拟滚动的参数配置不合理，叠加滚动条的问题后被放大了：

• 确保itemSize参数和列表项的实际高度完全匹配，CDK会根据这个值计算渲染数量，偏差太大容易导致频繁的元素销毁重建
• 给cdkVirtualFor添加trackBy函数，减少不必要的DOM更新：

// 组件内定义trackBy函数
trackByItemId(index: number, item: YourItemType): number {
  return item.id; // 用列表项的唯一标识，没有的话用index也可以
}

模板中使用：

<cdk-virtual-scroll-viewport itemSize="60">
  <div *cdkVirtualFor="let item of items; trackBy: trackByItemId">
    {{ item.content }}
  </div>
</cdk-virtual-scroll-viewport>

4. Chrome浏览器专属优化 #

Chrome对自定义滚动条的处理有一些特殊的性能点，可以试试这两个操作：

• 打开chrome://flags/#smooth-scrolling，确保浏览器的平滑滚动功能处于开启状态
• 避免在虚拟滚动容器内使用position: fixed的元素，这类元素会干扰Chrome的滚动优化机制

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