在開發過程中為了保持界面樣式的一致性，需要自定義scrollbar的樣式，可是只有chrome可以定義樣式，IE只能設置顏色，火狐是直接不可以設置，於是就找了這個庫，它是github開源的，但沒有中文文檔，只有英文的，下面是我翻譯的中文文檔，英語水平不好，有錯請見諒，可以評論告訴我修改。
源碼以及英文api：GitHub地址：點我點我
使用中的一些常見問題可以在這個官方wiki中找到：點我點我
注意
除非不得不使用自定義滾動條，否則始終建議使用瀏覽器自帶的滾動條。
支持chrome、IE11、edge、火狐等瀏覽器，其中IE11中的scrollbar在使用時會有一點渲染問題，缺點是不支持IE10以下的IE和edge。其他的舊版瀏覽器我沒有測試。
文檔開始
安裝
npm
npm是安裝和使用perfect-scrollbar的最佳方法。它已注冊為perfect-scrollbar。
$ npm install perfect-scrollbar
說明書下載
您可以從Releases手動下載perfect-scrollbar 。
在GitHub上下載
如果要使用插件的開發版本，請手動從源代碼進行構建。開發版本可能不穩定。網址在這里
$ git clone https://github.com/mdbootstrap/perfect-scrollbar.git $ cd perfect-scrollbar $ npm install $ npm run build
如何使用
首先，請檢查container元素是否符合要求，並且已導入主CSS。
<style>
#container {
position: relative;
width: 600px;
height: 400px;
}
</style>
<link rel="stylesheet" href="css/perfect-scrollbar.css">
通過ES模塊導入：
import PerfectScrollbar from 'perfect-scrollbar';
或在browser中（直接引入js文件）：
<script src="dist/perfect-scrollbar.js"></script>
初始化：
const container = document.querySelector('#container');
const ps = new PerfectScrollbar(container);
// or just with selector string
const ps = new PerfectScrollbar('#container');
可以使用option進行初始化。（推薦使用這種方式，因為這樣可以更細致的設置，設置方法在下面）
const ps = new PerfectScrollbar('#container', {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
如果容器或內容的大小發生變化，請使用update進行更新。
ps.update();
如果要銷毀滾動條，請使用destroy。
ps.destroy();
ps = null; // to make sure garbages are collected
如果您想滾動到某個地方，只需更新scrollTop。
const container = document.querySelector('#container');
container.scrollTop = 0;
您還可以案例中獲取有關如何使用插件的信息 。案例網址在這里:點我點我
options
(通過在option中設置以下屬性可以更細致的設置scrollbar的樣式)
handlers {String[]}
它是處理程序列表，用於滾動元素。(這里面是可以操作滾動條的方式)
默認：['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']
wheelSpeed {Number}
應用於鼠標滾輪事件的滾動速度。
默認：1
wheelPropagation {Boolean}
如果這個選項為true，當滾動到達底端，鼠標滾輪事件將被傳給父元素。
默認：false
swipeEasing {Boolean}
如果此選項為true，將簡化滑動滾動。
默認：true
minScrollbarLength {Number?}
設置為整數值時，滾動條的拇指部分（就是滾動條的高亮部分）不會縮小到該像素數以下（最小寬度）。
默認：null
maxScrollbarLength {Number?}
設置為整數值時，滾動條的拇指部分將不會擴展到該數量的像素。
默認：null
scrollingThreshold {Number}
這將設置閾值，ps--scrolling-x並ps--scrolling-y保留類別。在默認CSS中，無論懸停狀態如何，它們都會顯示滾動條。單位是毫秒。（scrollbar的響應時間）
默認：1000
useBothWheelAxes {Boolean}
設置為true時，只有一個（垂直或水平）滾動條可見，然后垂直和水平滾動都會影響該滾動條。
默認：false
suppressScrollX {Boolean}
設置為true時，無論內容寬度如何，X軸上的滾動條都將不可用。
默認：false
suppressScrollY {Boolean}
設置為true時，無論內容高度如何，Y軸上的滾動條都不可用。
默認：false
scrollXMarginOffset {Number}
在不啟用X軸滾動條的情況下，內容寬度可以超過容器寬度的像素數。允許一些“擺動空間”或“偏移中斷”，因此僅由於幾個像素而不能啟用X軸滾動條。
默認：0
scrollYMarginOffset {Number}
在不啟用Y軸滾動條的情況下，內容高度可以超過容器高度的像素數。允許一些“擺動空間”或“偏移中斷”，因此僅由於幾個像素而不能啟用Y軸滾動條。
默認：0
Events 事件
自定義事件。
container.addEventListener('ps-scroll-x', () => ...);
ps-scroll-y
此事件在y軸在任一方向上滾動。
ps-scroll-x
此事件在x軸在任一方向上滾動。
ps-scroll-up
向上滾動時，該事件觸發。
ps-scroll-down
向下滾動時，此事件觸發。
ps-scroll-left
向左滾動時，該事件觸發。
ps-scroll-right
向右滾動時，該事件觸發。
ps-y-reach-start
滾動此事件在到達y軸的開始。
ps-y-reach-end
滾動此事件在到達y軸（對於無限滾動有用）的端部。
ps-x-reach-start
滾動此事件在到達x軸的開始。
ps-x-reach-end
滾動此事件在到達x軸的端部。
您也可以通過觀看REACH狀態reach屬性。
const ps = new PerfectScrollbar(...);
console.log(ps.reach.x); // => 'start' or 'end' or null
console.log(ps.reach.y); // => 'start' or 'end' or null
文檔結束
關於樣式（顏色透明度等），可以通過設置.ps__rail-y等的css進行設置，注意加!important，
最后是我測試用的demo
<!DOCTYPE html>
<html>
<head>
<title>perfect-scrollbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/perfect-scrollbar.css" rel="stylesheet">
<style>
#device_scroll {
float: left;
background-color: #0F152F;
width: 517px;
height: 521px;
color: white;
/*overflow: hidden;
position: relative;
是必須有的*/
overflow: hidden;
position: relative;
display: none;
}
/*滾動條*/
/*y 是縱軸*/
/*scrollbar背景*/
.ps__rail-y {
background-color: red;
}
/*靜置時的樣式*/
.ps__thumb-y {
background-color: green !important;
}
/*動態樣式*/
.ps .ps__rail-y:hover,
.ps .ps__rail-y:focus,
.ps .ps__rail-y.ps--clicking {
background-color: red;
opacity: 0.9;
}
</style>
</head>
<body>
<div id="device_scroll">
<div class="">
dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />dddddddd
<hr />
</div>
</div>
<script src="js/perfect-scrollbar.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//初始化滾動條scrollbar
const ps = new PerfectScrollbar('#device_scroll', {
//滾動速度，默認為1
wheelSpeed: 1,
//最小寬度 單位px
suppressScrollX: true,
//到達最低端時告知父元素
wheelPropagation: true,
//最小寬度
minScrollbarLength: 20
});
</script>
</body>
</html>