在 mat-tab-group 上制作粘性标题答案

【问题标题】：Make sticky header on mat-tab-group在 mat-tab-group 上制作粘性标题
【发布时间】：2021-04-23 00:20:36
【问题描述】：

我正在使用 mat-tab-group，我希望在向下滚动到内容时修复选项卡标题。所以，我固定了标签内容的高度。我可以滚动浏览带有固定标题的内容。但是，然后我在页面上看到两个滚动条，这很奇怪。有没有其他方法可以在滚动浏览内容时修复选项卡标题？附加sn-p：

<mat-tab-group>
  <mat-tab label="Tab 1">
    <div style="overflow: scroll; height: 50%">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </mat-tab>
  <mat-tab label="Tab 2">Tab 2</mat-tab>
  <mat-tab label="Tab 3">Tab 3</mat-tab>
</mat-tab-group>

[编辑]：我更希望修复 mat-tab 的标题。那么，有没有直接的方法来代替固定样式的高度？

【问题讨论】：

你可以像你的代码在这里这样的页面的正文添加样式
@Shubham 这是个好主意吗？因为，将溢出隐藏在 body 将反映在整个应用程序的角度。

标签： angular angular-material mat-tab

【解决方案1】：

app.component.html

<mat-tab-group>
  <mat-tab label="Content 1"> Content </mat-tab>
  <mat-tab label="Content 2"> Content </mat-tab>
  <mat-tab label="Content 3"> Content </mat-tab>
</mat-tab-group>

app.component.scss

:host ::ng-deep .mat-tab-header {
    top: 0;
    z-index: 1000; 
    position: sticky;
    position: -webkit-sticky; /* macOS/iOS Safari */    
}

【讨论】：

【解决方案2】：

更改overflow 样式，如：

<div style="overflow-x: auto; overflow-y: visible; height: 50%">

因此，水平滚动仅在需要时可见，而垂直不会出现。

【讨论】：