perfect-scrollbar 一个全浏览器适用的自定义scrollbar

在开发过程中为了保持界面样式的一致性，需要自定义scrollbar的样式，可是只有chrome可以定义样式，IE只能设置颜色，火狐是直接不可以设置，于是就找了这个库，它是github开源的，但没有中文文档，只有英文的，下面是我翻译的中文文档，英语水平不好，有错请见谅，可以评论告诉我修改。

源码以及英文api：GitHub地址：点我点我

使用中的一些常见问题可以在这个官方wiki中找到：点我点我

注意
除非不得不使用自定义滚动条，否则始终建议使用浏览器自带的滚动条。

支持chrome、IE11、edge、火狐等浏览器，其中IE11中的scrollbar在使用时会有一点渲染问题，缺点是不支持IE10以下的IE和edge。其他的旧版浏览器我没有测试。

文档开始
安装
npm

npm是安装和使用perfect-scrollbar的最佳方法。它已注册为perfect-scrollbar。

1	`$ 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

如何使用

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

首先，请检查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>