在开发过程中为了保持界面样式的一致性，需要自定义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">//初始化滚动条scrollbarconst ps = new PerfectScrollbar('#device_scroll', {//滚动速度，默认为1wheelSpeed: 1,//最小宽度 单位pxsuppressScrollX: true,//到达最低端时告知父元素wheelPropagation: true,//最小宽度minScrollbarLength: 20});</script></body>
</html>

perfect-scrollbar 一个全浏览器适用的自定义scrollbar，使用方法中文文档相关推荐

php7连接oracle数据库,使用一个持久连接连到 Oracle 数据库 - PHP 7 中文文档
(PHP 5, PHP 7, PECL OCI8 >= 1.1.0) oci_pconnect – 使用一个持久连接连到 Oracle 数据库说明 oci_pconnect ( string ...
thinkjs能在浏览器html文件,thinkjs框架的默认模板引擎Nunjucks的中文文档
Node 端使用 $ npm install nunjucks 0 $npminstallnunjucks 下载后可直接 require('nunjucks') 使用浏览器端使用可直接使用 nun ...
Phoenix综述（史上最全Phoenix中文文档）
个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...
java异常在哪一层捕获_当在一个方法的代码中抛出一个检测异常时,该异常或被方法中的 ( )结构捕获,或者在方法的 ( ) 中声明_学小易找答案...
[填空题]当异常已经被定义时,必须通过( ) 语句来处理它. [填空题]Catch 子句包含( )的程序段 [单选题]下列java语言的常用异常类中,属于检测异常的是() [单选题]自定义异常类时,可 ...
Android自定义ScrollBar,Android必知必会-自定义Scrollbar样式
如果移动端访问不佳,请使用–>GitHub版背景设计师给的设计图完全依照 IOS 的标准来的,导致很多细节的控件都得自己重写,最近的设计图中有显示滚动条,Android 默认的滚动条样式(带 ...
Thymeleaf 中文文档----全译版
文章目录 1 引入Thymeleaf 1.1 Thymeleaf是什么? 1.2 Thymeleaf可以处理什么样的模板? 1.3 方言:标准方言 2 一个很棒的虚拟杂货店设计 2.1 一个杂货店的网 ...
jQuery.NiceScroll - 有史以来最好的 nicescroll 版本——在现代浏览器和移动设备上极其流畅和一致，资源使用率低(中文文档)
jQuery.NiceScroll 特征依赖关系使用配置参数有史以来最好的 nicescroll 版本--在现代浏览器和移动设备上极其流畅和一致,资源使用率低官网:nicescroll.ar ...
Facebook Docusaurus 中文文档自定义页面
此系列文章的应用示例已发布于 GitHub: docusaurus-docs-Zh_CN. 可以 Fork 帮助改进或 Star 关注更新. 欢迎 Star. 自定义页面您可以将网页添加到您的网站, ...
MoviePy - 中文文档(一个专业的python视频编辑库)教程
MoviePy是一个用于视频编辑的python模块,你可以用它实现一些基本的操作(比如视频剪辑,视频拼接,插入标题),还可以实现视频合成,还有视频处理,抑或用它加入一些自定义的高级的特效.总之,它的功 ...

perfect-scrollbar 一个全浏览器适用的自定义scrollbar，使用方法中文文档

注意

文档开始

安装

如何使用

options

`handlers {String[]}`

`wheelSpeed {Number}`

`wheelPropagation {Boolean}`

`swipeEasing {Boolean}`

`minScrollbarLength {Number?}`

`maxScrollbarLength {Number?}`

`scrollingThreshold {Number}`

`useBothWheelAxes {Boolean}`

`suppressScrollX {Boolean}`

`suppressScrollY {Boolean}`

`scrollXMarginOffset {Number}`

`scrollYMarginOffset {Number}`

Events 事件

`ps-scroll-y`

`ps-scroll-x`

`ps-scroll-up`

`ps-scroll-down`

`ps-scroll-left`

`ps-scroll-right`

`ps-y-reach-start`

`ps-y-reach-end`

`ps-x-reach-start`

`ps-x-reach-end`

文档结束

perfect-scrollbar 一个全浏览器适用的自定义scrollbar，使用方法中文文档相关推荐

最新文章

热门文章

perfect-scrollbar 一个全浏览器适用的自定义scrollbar，使用方法 中文文档

注意

文档开始

安装

如何使用

options

handlers {String[]}

wheelSpeed {Number}

wheelPropagation {Boolean}

swipeEasing {Boolean}

minScrollbarLength {Number?}

maxScrollbarLength {Number?}

scrollingThreshold {Number}

useBothWheelAxes {Boolean}

suppressScrollX {Boolean}

suppressScrollY {Boolean}

scrollXMarginOffset {Number}

scrollYMarginOffset {Number}

Events 事件

ps-scroll-y

ps-scroll-x

ps-scroll-up

ps-scroll-down

ps-scroll-left

ps-scroll-right

ps-y-reach-start

ps-y-reach-end

ps-x-reach-start

ps-x-reach-end

文档结束

perfect-scrollbar 一个全浏览器适用的自定义scrollbar，使用方法 中文文档相关推荐

最新文章

热门文章

perfect-scrollbar 一个全浏览器适用的自定义scrollbar，使用方法中文文档

`handlers {String[]}`

`wheelSpeed {Number}`

`wheelPropagation {Boolean}`

`swipeEasing {Boolean}`

`minScrollbarLength {Number?}`

`maxScrollbarLength {Number?}`

`scrollingThreshold {Number}`

`useBothWheelAxes {Boolean}`

`suppressScrollX {Boolean}`

`suppressScrollY {Boolean}`

`scrollXMarginOffset {Number}`

`scrollYMarginOffset {Number}`

`ps-scroll-y`

`ps-scroll-x`

`ps-scroll-up`

`ps-scroll-down`

`ps-scroll-left`

`ps-scroll-right`

`ps-y-reach-start`

`ps-y-reach-end`

`ps-x-reach-start`

`ps-x-reach-end`

perfect-scrollbar 一个全浏览器适用的自定义scrollbar，使用方法中文文档相关推荐