多标签页中Material展开面板打开时的滚动问题

解决方法 #

1. 等待动画完成后执行滚动 #

Material手风琴的面板展开带有过渡动画，直接调用scrollIntoView会在面板未完全展开时执行，导致滚动位置计算错误。可以通过requestAnimationFrame或延迟执行避开动画过程：

模板代码：

<mat-accordion>
  <mat-expansion-panel *ngFor="let item of items" (opened)="handlePanelOpen($event)">
    <mat-expansion-panel-header>ACC {{item}}</mat-expansion-panel-header>
    <p>面板内容...</p>
  </mat-expansion-panel>
</mat-accordion>

组件逻辑：

import { MatExpansionPanel } from '@angular/material/expansion';

// ...

handlePanelOpen(panel: MatExpansionPanel) {
  // 等待下一帧，确保面板动画完成
  requestAnimationFrame(() => {
    const panelEl = panel._elementRef.nativeElement;
    panelEl.scrollIntoView({
      behavior: 'smooth',
      block: 'start', // 让面板顶部对齐视图顶部
      inline: 'nearest'
    });
  });
}

如果requestAnimationFrame仍有问题，可匹配Material默认动画时长（225ms）用setTimeout延迟执行：

handlePanelOpen(panel: MatExpansionPanel) {
  setTimeout(() => {
    panel._elementRef.nativeElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }, 200); // 稍短于动画时长，避免等待太久
}

2. 直接计算滚动容器的目标位置 #

若滚动容器不是body而是手风琴的父容器，直接计算容器的scrollTop会更精准：

组件逻辑：

handlePanelOpen(panel: MatExpansionPanel) {
  requestAnimationFrame(() => {
    // 获取你的滚动容器，比如类名为tab-content的元素
    const scrollContainer = document.querySelector('.tab-content') as HTMLElement;
    if (!scrollContainer) return;

    const panelEl = panel._elementRef.nativeElement;
    // 计算面板相对于滚动容器的顶部偏移
    const targetTop = panelEl.offsetTop - scrollContainer.offsetTop;
    scrollContainer.scrollTop = targetTop;
  });
}

3. 临时禁用面板展开动画（可选） #

如果允许去掉动画，可在mat-expansion-panel上添加[@.disabled]="true"跳过动画，让scrollIntoView直接获取正确的面板高度：

<mat-expansion-panel [@.disabled]="true" (opened)="handlePanelOpen($event)">
  <!-- 面板内容 -->
</mat-expansion-panel>

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