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

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

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

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