Angular Material 18：如何让<mat-tab-group>表头固定在顶部？

你的问题核心是滚动容器范围错误：当前外层div.flex-auto overflow-y-auto让整个mat-tab-group（包括表头）都处于滚动区域内，加上cdkScrollable位置不正确，导致滚动内容时表头会被带出视口。

修复方案 #

调整DOM结构和样式，让表头脱离滚动容器，仅让标签页的内容区域滚动：

1. 修改模板代码

<div class="tab-container">
  <mat-tab-group
    [animationDuration]="'0'"
    headerPosition="below"
    mat-stretch-tabs="false"
  >
    <!-- 标签页1 -->
    <mat-tab label="List 1">
      <div class="tab-content" cdkScrollable>
        <app-leads></app-leads>
      </div>
    </mat-tab>

    <!-- 标签页2 -->
    <mat-tab label="List 2">
      <div class="tab-content" cdkScrollable>
        <inventory-list></inventory-list>
      </div>
    </mat-tab>
  </mat-tab-group>
</div>

2. 添加对应CSS样式

.tab-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保容器占满父元素的可用高度 */
}

mat-tab-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

mat-tab-body {
  flex: 1;
  overflow: hidden; /* 避免tab body自身滚动，把滚动权交给内部内容容器 */
}

.tab-content {
  height: 100%;
  overflow-y: auto; /* 仅内容区域可垂直滚动 */
}

关键修改说明 #

• 移除原外层div的overflow-y-auto，改为给每个标签页的内容单独设置滚动容器
• 通过Flex布局让mat-tab-group占满父容器高度，表头自然固定在顶部
• 将cdkScrollable移到每个标签页的内容容器上，确保Angular CDK的滚动行为正常触发
• 用mat-tab-body的overflow: hidden避免嵌套滚动冲突

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