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

问题描述

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

<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 的标题。那么，有没有什么直接的方法可以代替在样式中固定高度？

解决方法

更改 overflow 样式，例如：

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

因此，只有在需要时才会显示水平滚动，而不会出现垂直滚动。

,

app.component.html

Copy ID

app.component.scss

<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>