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

Question

我正在使用 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 的标题。那么，有没有直接的方法来做到这一点，而不是固定样式的高度？

Answer 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 */    
}

Answer 2

更改

overflow

风格，例如：

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

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

Answer 3

自从MDC迁移后，不再可以修改

MatTabHeader

css（好吧我没有成功）

但是我在等待 Angular Material 将“粘性”选项添加到其私有组件时发现了一个 DIY（在 Angular 18 中）：

app.component.html

  <mat-tab-group #tabRef>
    <mat-tab label="First"> ... </mat-tab>
    <mat-tab label="Second">Content 2</mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
  </mat-tab-group>

app.component.ts

  @ViewChild('tabRef') tabRef;  // MatTabGroup types seems to be private ?
  ngAfterViewInit() {
    this.tabRef._tabHeader._elementRef.nativeElement.style.position = 'sticky';
    this.tabRef._tabHeader._elementRef.nativeElement.style.top = '0';
  }

我不知道它会起作用多久，但对我来说它解决了问题。