Question

我希望有一个sidenav，顶部有一些按钮，下面的标签包含不同的数据。我想让选项卡内部滚动，以便顶部的按钮永远不会离开视图，这样我的用户在想要使用其中一个按钮时就不会向上滚动。

以下是一个示例：https://stackblitz.com/edit/angular-wdjfaa

正如您在示例中所看到的，当您打开抽屉时，没有任何滚动。在styles.scss中，我添加了

.mat-drawer {
    overflow-y: unset!important;
}

这样整个抽屉都不会滚动。我能够滚动的唯一方法是为标签主体设置一个固定的像素高度，我不想这样做，因为我需要它有100％的高度。

有人有任何想法吗？

谢谢！

Answer 1

尝试在css中使用sticky属性。将以下类添加到styles.scss

.mat-tab-header {
    z-index: 9999;
    position: sticky !important;
    top: 0px;
    background-color: white !important;
}

Answer 2

我只是将其更改为滚动，但它似乎已经起作用：

.mat-drawer {
    overflow-y: scroll
}

这是您要实现的目标吗？ https://stackblitz.com/edit/angular-wdjfaa-w7vurx

Answer 3

在angular 6.0及更高版本中，您可能需要使用以下内容

.mat-drawer-container { height: auto !important; }

Answer 4

.mat-tab-body-content {
  height: auto !important;
}

Answer 5

需要一些CSS规则才能使标签可滚动：

mat-tab-group {
  .mat-tab-header {
    .mat-tab-header-pagination {
      display: none !important; // <== disable pagination
    }
    .mat-tab-label-container {
      left: 0px; // if you need to use it on mobile - set left position to 0
      width: 100%;
      .mat-tab-list {
        overflow-x: auto !important; // <== set horisontal scroll bar imperatively
        // below rule prevents sliding of buttons' container - because it not sliding properly - to left it not slide as well
        transform: none !important;
        .mat-tab-labels {
          justify-content: unset !important; 
        }
      }
    }
  }
}

如果您要在标签上单击时自动滚动标签，请在https://stackoverflow.com/a/62031767/9026103上查看完整的解决方案

角度材料2滚动内部选项卡

5 个答案: