Angular MatSelect横向滚动异常问题求助

临时修复方案1：阻止容器自动回滚 #

给横向滚动容器添加cdkScrollable指令，监听mat-select的打开事件，强制容器保持当前滚动位置：

import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/scrolling';
import { MatSelect } from '@angular/material/select';

// 组件类内实现
constructor(private scrollDispatcher: ScrollDispatcher) {}

lockScrollOnSelectOpen(select: MatSelect, scrollContainer: CdkScrollable) {
  const sub = this.scrollDispatcher.scrolled().subscribe(() => {
    scrollContainer.scrollTo({ left: scrollContainer.measureScrollOffset('left') });
    sub.unsubscribe();
  });
}

模板中关联指令与事件：

<div #scrollContainer cdkScrollable class="horizontal-scroll-box">
  <mat-select (opened)="lockScrollOnSelectOpen($event.source, scrollContainer)">
    <!-- 下拉选项 -->
  </mat-select>
</div>

临时修复方案2：固定面板定位 #

通过自定义面板类，强制mat-select的下拉面板使用固定定位，避免触发容器滚动：

.fixed-select-panel {
  position: fixed !important;
  transform: translate(0, 48px) !important;
  max-height: 300px;
  overflow-y: auto;
}

模板中应用自定义类：

<mat-select panelClass="fixed-select-panel">
  <!-- 下拉选项 -->
</mat-select>

临时修复方案3：覆盖Material默认样式 #

在全局样式中修改mat-select-panel的属性，打断其触发容器滚动的逻辑：

.mat-select-panel {
  contain: layout style size;
  overflow: auto;
}

以上均为针对该未修复官方问题的临时替代方案，可根据项目实际场景选择适配。

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