在开发过程中为了保持界面样式的一致性,需要自定义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;
您还可以案例中获取有关如何使用插件的信息 。案例网址在这里:点我点我
(通过在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
自定义事件。
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>