Angular Material中mat-drawer溢出时如何让滚动从顶部起始？

这个滚动异常不是DOM结构编写问题，本质是Angular Material组件内置的自动聚焦滚动机制触发的偏移：
MatSelectionList 在组件初始化渲染完成后，会自动把焦点激活到列表内第一个可交互的选项元素上，连带触发浏览器原生的「聚焦元素自动滚动到可视区域」逻辑。因为列表内容是抽屉滚动容器的一部分，一旦自动聚焦第一个列表项，整个滚动容器就会被带动下移，直接把顶部的标题、副标题顶到可视区外，出现内容遮挡问题。

1. 优先使用官方原生配置解决（无侵入、无兼容风险） #

从Angular Material 9版本开始，MatSelectionList 就提供了autoActive输入属性，专门用来控制列表初始化后是否自动激活第一个选项。这个接口本来就是为了适配「列表上方存在静态头部、不希望列表加载时带动容器滚动」的场景，只需要在选择列表组件上添加这个配置即可：

<mat-selection-list [multiple]="false" [autoActive]="false">

相比手动调用scrollTo()的临时方案，这个配置完全遵循Material组件的设计逻辑，不会在版本升级时出现行为不一致的问题，也不会和后续的交互逻辑产生冲突。

2. 旧版本兜底方案（针对没有autoActive属性的低版本） #

如果项目使用的Angular Material版本较低，没有上述配置，可以通过CSS标准属性做兜底，不需要写JS滚动逻辑：

• 给抽屉容器加明确的滚动高度约束，避免滚动行为错乱：

.sidenav {
  block-size: 100%;
  overflow-y: auto;
}

• 利用scroll-margin-top抵消列表项聚焦带来的滚动偏移，这是CSS原生为聚焦滚动设计的标准属性：

.mat-list-option {
  scroll-margin-top: 0 !important;
}

这个方案不需要手动监听组件渲染时机、不需要写定时器等待滚动完成，纯样式实现，维护成本极低。

3. 结构优化方案（从根源上隔离滚动区域） #

如果你的抽屉顶部标题、副标题不需要跟随列表滚动，可以把静态头部从滚动流中独立出来，从根本上避免滚动干扰。调整后的组件结构参考：

<mat-drawer-container class="container">
    <mat-drawer #drawer (openedChange)="onOpenedChange($event)" class="sidenav" mode="push" opened>
        <!-- 固定头部，不参与滚动 -->
        <div class="drawer-header">
          <p class="drawer-title">Data Validation</p>
          <p class="drawer-subtitle">{{integrationName}}</p>
        </div>
        <!-- 独立滚动的列表区域 -->
        <mat-selection-list [multiple]="false" [autoActive]="false" class="scrollable-list">
            <mat-list-option 
              (click)="getTableNames(date); drawer.toggle()" 
              class="date-item" 
              *ngFor="let date of dataServiceDates">
                {{date}}
                <mat-divider></mat-divider>
            </mat-list-option>
        </mat-selection-list>
    </mat-drawer>
</mat-drawer-container>

配套样式：

.sidenav {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}
.drawer-header {
  flex-shrink: 0;
  padding: 16px;
}
.scrollable-list {
  flex: 1;
  overflow-y: auto;
}

这种结构下，滚动行为被完全限制在列表区域内部，哪怕列表组件触发自动聚焦逻辑，也只会在自己的滚动范围内调整位置，完全不会影响顶部固定的标题内容。同时原代码中同一元素绑定两个重复click事件的写法也可以合并，减少不必要的事件处理开销。

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