如何解决Angular Material Autocomplete在可滚动容器中与输入框位置不匹配问题

Angular Material Autocomplete的下拉浮层默认挂载在页面根节点下，仅监听全局窗口的滚动事件计算定位坐标。当输入框处于带固定高度、开启内部滚动的div容器中时，浮层无法感知这个内部容器的滚动行为，滚动时就会和原本锚定的输入框位置脱开。

最简落地方式 #

直接给带滚动属性的div添加CDK提供的cdkScrollable指令，无需写额外的事件监听逻辑：

<div 
  cdkScrollable 
  class="fixed-height-scroll-container" 
  style="height: 200px; overflow-y: auto;"
>
  <mat-form-field>
    <input matInput [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <!-- 下拉选项列表 -->
    </mat-autocomplete>
  </mat-form-field>
</div>

cdkScrollable是CDK专门为浮层定位提供的标识指令，添加后会自动把当前容器注册为浮层可识别的滚动源，浮层在计算位置时会主动监听这个容器的滚动事件，实时同步下拉面板和输入框的相对坐标，滚动容器时下拉会始终锚定在输入框正下方。

特殊场景补充配置 #

如果添加指令后仍出现定位偏移，可根据实际场景调整浮层的滚动策略：

• 注入CDK的ScrollStrategyOptions服务，给Autocomplete绑定重定位滚动策略，强制浮层在容器滚动时重新计算锚定位置

import { ScrollStrategyOptions } from '@angular/cdk/overlay';

constructor(private scrollStrategyOptions: ScrollStrategyOptions) {}

// 定义重定位滚动策略
autocompleteScrollStrategy = this.scrollStrategyOptions.reposition();

<mat-autocomplete [scrollStrategy]="autocompleteScrollStrategy"></mat-autocomplete>

• 检查可滚动容器的overflow属性，不要手动把Autocomplete的浮层切换为挂载在内部div下，否则会被父容器的滚动裁剪逻辑截断，出现下拉显示不全的问题

• 确保可滚动div设置了明确的定位属性（relative/absolute均可），避免浮层定位参考的父级元素错位
• 不要给Autocomplete的浮层面板设置过低的z-index，否则滚动时下拉会被其他同级元素遮挡

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