仅删除 mat-select 组件的 Scroll Webkit css 类答案

【问题标题】：Removing Scroll Webkit css classes for mat-select component only仅删除 mat-select 组件的 Scroll Webkit css 类
【发布时间】：2021-04-20 21:33:14
【问题描述】：

我已经覆盖了 global.scss 中的 webkit 滚动类。但是对于 mat-select ，只要有滚动，它总是停留在屏幕上，尽管设置了 overflow: auto 。这是因为覆盖了滚动条类。

现在自定义滚动条出现在 mat-select 的右侧，看起来很丑。我想隐藏它并继续滚动。所有其他答案都与非角度有关。

这里我不知道如何正确使用ng-deep。

这是我的_globals.scss

body {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 10px;
  }

}

我在我的自定义选择组件中尝试了几个选项，例如&很多组合。

body {
  ::-webkit-scrollbar {
    display: none !important;
  }
}

我如何才能在组件 scss 中实现这一点，仅限于我使用时

::ng-deep {
  ::-webkit-scrollbar {
    display: none !important;
  }
}

然后它起作用了，但显然这到处都是流血！访问我的选择组件后，每个人的滚动条都消失了。

Angular v11

【问题讨论】：

标签： angular scrollbar

【解决方案1】：

好的，我最终通过使用 mat-select 的 'panel-class' 实现了这一点。

在我的组件模板中，我将它作为“.panelClass”提供给 mat-select。

在 SCSS 中

::ng-deep {
  .panelClass {
    &::-webkit-scrollbar {
      display: none !important;
    }
  }
}

完成！滚动条隐藏和滚动适用于垫选！

【讨论】：