2019-03-28 用ngx-perfect-scrollbar写滚动条

ngx-perfect-scrollbar

基于perfect-scrollbar( 用js写的 )写的适用于angular版本，但作者不是同一个人。
github地址：https://github.com/zefoy/ngx-perfect-scrollbar#readme

我需要的效果：

大多数浏览器都兼容，跟浏览器默认样式有很大区别，与ngx-perfect-scrollbar提供的默认样式也不同（保密原因，不贴图了）。

用法：

有两种使用方法：component的方式和directive的方式。
首先，引入module:

引入module.png

1. component方式：

   
   
   component方式.png

此种方法比较简单，官网也有详细介绍。也许是我使用方法不对，有一个很烦的地方：直接在css中写样式覆盖不了提供的默认样式。这种方法pass。

2. derective方式：

   
   
   derective方式.png
   
   

   需要注意的地方：
   （1）引入的css文件就是自个要用到的滚动条样式文件。在此步骤中，我直接在xxx.componnet.css中写样式不起作用，必须引入(@import 'xxx')。
   （2）如果你的滚动条有边框，千万不要直接设置border: 1px solid #xxxxxx; 会有bug!!! 什么样的bug呢，非常恶心，滚动条滚动到底部还能继续滚动，页面高度不断增加。
   我的做法是，利用background和::after做了一个假的边框：

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: $color-gray2;
  &::after{
    content: " ";
    display: block;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background-color: white;
    margin: 1px;
  }
}

为什么边框会造成这个结果我还不知道，问了开发者，他也不知道，emmmmmm，有说的不对的地方，还请大家多多指正~