在开发过程中为了保持界面样式的一致性，需要自定义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;
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;
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>