在角度材质标签中设置水平滚动

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

问题：

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

StackBlitz Here.

Answer 1

似乎它是known issue，并且仍处于打开状态。

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

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

Answer 2

我已经通过在已经可滚动的mat-tabs上制作了自己的自动滚动效果解决了滚动问题，当您单击部分可见的tab时，它将自动滚动到几乎居中的位置，还向左按钮滚动到右，右部分可见按钮（向左）。

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

Answer 3

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

::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存储库并进行了上述更改。下面是工作示例

StackBlitz

Answer 4

最后一个选项卡处于活动状态时无法滚动的原因是，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;
  }

}

警告：此解决方案的问题在于，它会终止转换效果，并且在用户不得不自己滚动的情况下可能会带来糟糕的用户体验。可以说，最好是根本不能向左滚动。