关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

资料：

http://manos.malihu.gr/jquery-custom-content-scroller/  （此项是结合Jquery使用的，在此并未采用）

https://www.npmjs.com/package/ngx-perfect-scrollbar

https://www.cnblogs.com/liulei-cherry/p/10044159.html#4454915

曾多少次遇到想修改各个浏览器的滚动条样式，因为实在是看着不爽，今天终于实现了这个骚操作↓

在没有遇到ngx-perfect-scrollbar之前修改浏览器滚动条样式只会这样操作↓

  /*css主要部分的样式*/
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
      width: 7px;
      /*对垂直流动条有效*/
      height: 7px;
      /*对水平流动条有效*/
  }

  /*定义滚动条的轨道颜色、内阴影及圆角*/
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset   3px white;
      background-color: #fff;
      border-radius: 3px;
  }

  /*定义滑块颜色、内阴影及圆角*/
  ::-webkit-scrollbar-thumb {
      border-radius: 7px;
      -webkit-box-shadow: inset   3px white;
      background-color: #E8E8E8;
  }

  /*定义两端按钮的样式*/
  ::-webkit-scrollbar-button {
      background-color: #fff;
  }

  /*定义右下角汇合处的样式*/
  ::-webkit-scrollbar-corner {
      background: #fff;
  }

但是这个只对谷歌浏览器生效，其它浏览器并未生效

趁着最近有时间，在网上找到了ngx-perfect-scrollbar才发现是能够自定义修改各浏览器滚动条样式的，不甚欢喜。

好了，我们来看看在angular如何使用它↓

通过yarn的方式安装ngx-perfect-scrollbar包，当然也可以用npm

yarn add ngx-perfect-scrollbar

引入module

使用方式：

API 提供了两种使用方式，一种是 Component 使用方式，一种是 Derective使用方式。我在项目中用的后者

最后引入css文件

//styles.less中

@import '~perfect-scrollbar/css/perfect-scrollbar.css';

说明：可能会存在样式冲突不生效情况，这个时候 重写哈perfect-scrollbar.css文件下 的 ps__rail-x样式就行了

.ps__rail-x {

    position: relative !important;

}

最终效果如下：