在角度材料选项卡中设置水平滚动

Question

如果我们在手机浏览器中看到如下标签，有两个按钮【分页控件】（第一个在右侧，另一个在左侧）

<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
    <mat-tab label="Item-1"> Content 1 </mat-tab>
    <mat-tab label="Item-2"> Content 2 </mat-tab>
    <mat-tab label="Item-3"> Content 3 </mat-tab>
    <mat-tab label="Item-4"> Content 4 </mat-tab>
    <mat-tab label="Item-5"> Content 5 </mat-tab>
    <mat-tab label="Item-6"> Content 6 </mat-tab>
    <mat-tab label="Item-7"> Content 7 </mat-tab>
    <mat-tab label="Item-8"> Content 8 </mat-tab>
    <mat-tab label="Item-9"> Content 9 </mat-tab>
    <mat-tab label="Item-10"> Content 10 </mat-tab>
</mat-tab-group>

我将删除这两个按钮并使用滚动代替。

解决方法：

（步骤 1）使用以下代码删除两个按钮：

ngAfterViewInit(): void {
  document.getElementsByClassName('mat-tab-header-pagination-before')[0].remove();
  document.getElementsByClassName('mat-tab-header-pagination-after')[0].remove();
}

（第 2 步）将以下样式放入 style.css 中：

.mat-tab-label-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    z-index: 1;
    overflow-x: scroll !important;
}

问题：

上述方法的问题是当我们选择 item-10 时我们无法向左滚动

StackBlitz 在这里。

Answer 1

我们可以将溢出样式应用于 .mat-tab-label-container，而不是将其应用于 .mat-tab-header 类。

 ::ng-deep .mat-tab-header { overflow-x: scroll !important; } ::ng-deep .mat-tab-label-container { overflow: visible !important; }

另外，如果要删除使用 overflow-x: scroll 的元素下方的滚动条，我们可以执行以下操作：

 ::ng-deep .mat-tab-header::-webkit-scrollbar { display: none; }

解决方法：item-10无法向左滚动的问题通过上述样式解决。 我已经分叉了@AbolfazlR 存储库并进行了上述更改。 下面是工作示例

闪电战

Answer 2

它似乎是一个已知问题，并且仍处于开放状态。

一个可能的解决方案是使用此 scss 规则（从问题的讨论中复制）而不是您提到的解决方法：

::ng-deep .mat-tab-header-pagination {
    display: none !important;
}

Answer 3

当最后一个选项卡处于活动状态时无法滚动的原因是因为 Angular mat-tab 控件正在使用转换将最后一个选项卡移动到视图中并将其强制到容器的右侧。

一个可能的解决方案是通过添加这个 CSS 类来压缩转换：

::ng-deep {

   // SOLUITON:
  .mat-tab-list {
    transform: inherit !important;
  }


  // FORCES SCROLLABILIY:
  .mat-tab-label-container {
    overflow-x: scroll !important;
  }

  // HIDES MAT-TAB's NATIVE PAGINATION:
  .mat-tab-header-pagination {
    display: none !important;
  }

}

警告：此解决方案的问题在于它会破坏变换效果，并且可能是糟糕的用户体验，因为用户必须自己滚动。 可以说，最好是根本无法向左滚动。

Answer 4

我通过在已经可以滚动的 mat-tabs 上制作我自己的自动滚动效果解决了这些滚动问题 - 当你点击部分可见的选项卡时 - 它会自动滚动到接近中心位置，左按钮也会向右滚动左侧部分可见的按钮。

请查看此评论以获取更多详细信息： https : //stackoverflow.com/a/62031767/9026103