關於Angular+ngx-perfect-scrollbar自定義各大瀏覽器滾動條樣式的解決方法

本文轉載自查看原文 2019-12-11 17:27 245 學習/ Angular

資料：

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之前修改瀏覽器滾動條樣式只會這樣操作↓

 1  /*css主要部分的樣式*/
 2  /*定義滾動條寬高及背景，寬高分別對應橫豎滾動條的尺寸*/
 3  ::-webkit-scrollbar {
 4      width: 7px;
 5      /*對垂直流動條有效*/
 6      height: 7px;
 7      /*對水平流動條有效*/
 8  }
 9 
10  /*定義滾動條的軌道顏色、內陰影及圓角*/
11  ::-webkit-scrollbar-track {
12      -webkit-box-shadow: inset 0 0 3px white;
13      background-color: #fff;
14      border-radius: 3px;
15  }
16 
17  /*定義滑塊顏色、內陰影及圓角*/
18  ::-webkit-scrollbar-thumb {
19      border-radius: 7px;
20      -webkit-box-shadow: inset 0 0 3px white;
21      background-color: #E8E8E8;
22  }
23 
24  /*定義兩端按鈕的樣式*/
25  ::-webkit-scrollbar-button {
26      background-color: #fff;
27  }
28 
29  /*定義右下角匯合處的樣式*/
30  ::-webkit-scrollbar-corner {
31      background: #fff;
32  }