Angular Material mat-select 滚动位置异常的解决方案

问题背景

在使用 Angular Material 的 mat-select 组件时，开发者可能会遇到一个常见问题：当选择下拉选项时，面板会自动滚动到顶部，而不是保持在当前选择位置。这种行为在多选场景下尤为明显，会影响用户体验。

问题分析

该问题源于 mat-select 组件内部对选项高度的预设处理机制。组件默认期望所有选项具有统一的高度，当开发者自定义选项样式或高度时，可能会导致滚动位置计算异常。

解决方案

经过技术验证，可以通过以下方式解决滚动位置异常问题：

let me: this = this;
me.fieldCtrl.optionSelectionChanges.subscribe((): void => {
    // 记录当前滚动位置
    me.scrollTopBeforeSelection = me.fieldCtrl.panel.nativeElement.scrollTop;
    
    // 设置滚动拦截标志
    let selectionInProgress: boolean = true;
    
    // 拦截滚动事件
    me.fieldCtrl.panel.nativeElement.onscroll = function (event: any): void {
        if (!selectionInProgress) {
            return;
        }
        // 强制保持滚动位置
        event.target.scrollTop = me.scrollTopBeforeSelection;
        selectionInProgress = false;
    };
});

实现原理

1. 事件监听：通过订阅 optionSelectionChanges 事件，在选项选择时触发处理逻辑
2. 位置记录：在选择操作前记录当前滚动位置
3. 滚动拦截：临时拦截滚动事件，强制保持记录的滚动位置
4. 状态控制：使用标志位确保只在选择过程中拦截滚动

最佳实践

1. 封装为指令：建议将此逻辑封装为自定义指令，提高代码复用性
2. 性能优化：确保在组件销毁时取消订阅和事件监听
3. 兼容性考虑：测试不同浏览器下的滚动行为一致性
4. 用户体验：可添加平滑滚动过渡效果，提升交互体验

注意事项

1. 此方案属于对组件行为的干预，需谨慎使用
2. 在 Angular Material 版本升级时需重新验证方案有效性
3. 对于复杂自定义选项，可能需要调整滚动位置计算逻辑
4. 建议在必要时才使用此方案，优先考虑官方推荐配置

通过这种解决方案，开发者可以有效地控制 mat-select 组件的滚动行为，在多选场景下提供更流畅的用户体验。