Angular cdk-virtual-scroll搭配scroll-snap-type时出现滚动闪烁问题

Angular CDK 虚拟滚动的核心运行逻辑是监听容器滚动事件，动态计算当前可视区域需要渲染的条目，实时调整内容容器偏移量、增删渲染范围内的DOM节点。当给滚动视口设置scroll-snap-type后，浏览器原生滚动吸附逻辑会和CDK的偏移量计算逻辑产生冲突：CDK调整DOM和偏移的瞬间，浏览器会触发吸附位置修正，反过来又触发CDK滚动监听重新计算，短时间内多次位置互斥更新就会导致持续数秒的闪烁现象。

方案1：适配配置（改动量最小） #

• 放弃scroll-snap-type: y mandatory配置，强制吸附的冲突概率最高，替换为scroll-snap-type: y proximity，仅当滚动停止位置接近吸附点时才触发吸附，大幅减少滚动过程中的位置强制修正
• 给滚动视口添加scroll-snap-stop: normal配置，避免浏览器强制中断滚动流程跳转到吸附点
• 调整CDK虚拟滚动的滚动事件节流时间，减少滚动过程中DOM更新频率，给浏览器snap计算留出一帧的缓冲时间：

@ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

ngAfterViewInit() {
  this.viewport.elementScrolled()
    .pipe(throttleTime(16, undefined, {trailing: true}))
    .subscribe(() => this.viewport.checkViewportSize());
}

• 追加以下CSS规则，避免渲染过程中的布局抖动：

cdk-virtual-scroll-viewport {
  scroll-snap-type: y proximity;
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}
cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper {
  will-change: transform;
}
cdk-virtual-scroll-viewport > * {
  scroll-snap-align: start;
  contain: layout style paint;
}

方案2：分层隔离逻辑（稳定性最高） #

如果方案1仍存在偶发闪烁，直接将滚动吸附和虚拟滚动逻辑拆分到不同层级，从根源消除冲突：

• 外层单独设置固定高度的滚动容器，配置所有scroll-snap相关属性
• 内层放置cdk-virtual-scroll-viewport，关闭原生滚动条，监听外层容器的滚动事件，将滚动位置同步给内层虚拟滚动视口
• 该实现下snap逻辑完全由外层容器处理，CDK仅负责根据同步的滚动位置渲染对应条目，不会出现逻辑互斥

方案3：JS实现吸附（支持强吸附需求） #

如果需要使用mandatory级别的强吸附效果，放弃CSS原生scroll-snap，直接监听虚拟滚动的滚动结束事件，调用CDK自带的滚动方法实现对齐：

fromEvent(this.viewport.elementRef.nativeElement, 'scrollend')
  .pipe(throttleTime(100))
  .subscribe(() => {
    const currentOffset = this.viewport.measureScrollOffset();
    const itemSize = 50; // 替换为实际业务中的条目高度
    const targetIndex = Math.round(currentOffset / itemSize);
    this.viewport.scrollToIndex(targetIndex, 'smooth');
  });

避坑提示：不要在虚拟滚动的条目上使用margin设置间距，否则会导致CDK位置计算和snap吸附点计算出现偏差，这是多数场景下闪烁的隐藏诱因，间距改用padding或内层元素实现。

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