如何解决mat-select多选框点击时出现异常滚动跳转的问题？

Angular Material的多选下拉面板（mat-select）在处理选项选中时，内部逻辑会自动将选中的mat-option滚动到面板视图范围内。当mat-option标签前存在独立的兄弟元素（比如文本、其他HTML标签）时，面板的滚动偏移量计算会错误地包含这些前置元素的高度，导致点击选项时滚动条跳转到异常位置——组件默认认为mat-option是面板内的直接子元素，前置内容打破了这个布局预期，干扰了滚动定位的计算逻辑。

方案1：将前置内容移入mat-option内部 #

把原本放在mat-option标签外的内容，直接放到mat-option标签内部，这样组件的滚动定位逻辑会以完整的mat-option元素为基准，不会出现偏移错误。示例代码：

<!-- 错误写法 -->
<div>额外说明文本</div>
<mat-option [value]="option.value">{{option.label}}</mat-option>

<!-- 修正后写法 -->
<mat-option [value]="option.value">
  <div>额外说明文本</div>
  {{option.label}}
</mat-option>

方案2：手动拦截并修正滚动行为 #

如果必须保留mat-option前的独立内容，可以在选项点击时手动锁定滚动位置，抵消组件的错误滚动。在组件中添加如下逻辑：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatSelect) select!: MatSelect;

  ngAfterViewInit() {
    this.select.panel?.nativeElement.addEventListener('click', (e: Event) => {
      const optionEl = (e.target as HTMLElement).closest('mat-option');
      if (optionEl) {
        // 记录当前滚动位置
        const currentScrollTop = this.select.panel?.nativeElement.scrollTop;
        // 延迟执行，抵消组件的自动滚动
        setTimeout(() => {
          if (currentScrollTop !== undefined) {
            this.select.panel!.nativeElement.scrollTop = currentScrollTop;
          }
        }, 0);
      }
    });
  }
}

方案3：用CSS固定前置内容 #

如果前置内容是面板顶部的固定提示类内容，可以通过CSS让其脱离滚动流，避免干扰mat-option的滚动计算：

.mat-select-panel .fixed-pre-content {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 8px;
  z-index: 1;
}

这种方式下，前置内容会固定在面板顶部，下方的mat-option滚动时不会被其高度影响。

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