EasyBar
[TOC]
1、简介
js 实现的浏览器自定义 ScrollBar 工具
Demo
2、获得
npm build:构建
npm start:运行开启服务,查看示例 http://localhost:8080/
npm i easy-bar 安装
3、兼容性
电脑端:主流浏览器全部兼容;
移动端:除了火狐手机版外都兼容;(有人测出华为手机系统自带的浏览器也不兼容,身边没有华为手机先搁置)
4、快速使用
根据开发场景选择对应的版本.js|.min.js|.common.js|.umd.js
4.1、HTML-JS-CSS
引入
<script src="./easy-bar.min.js"></script>
<div id="el1" style="width:500px; height:500px;">
<div style="width:600px; height:600px;"></div>
</div>
写法一
var el = document.getElementById("el1");
EasyBar.bind(el, options);
EasyBar.update(el, options);
EasyBar.refreshBar(el);
EasyBar.unBind(el);
写法二
var el = document.getElementById("el1");
var bar = new EasyBar(el);
bar.bind(options);
bar.update(options);
bar.refreshBar();
bar.unBind();
4.2、Vue
引入
import EasyBar from "easy-bar";
Vue.use(EasyBar);
使用
<div style="width:500px; height:500px;" v-bar>
<div style="width:600px; height:600px;"></div>
</div>
4.3、其他
请自行封装
5、参数说明
minLength: 50,
maxLength: -1,
resizeRefresh: true,
barfloat: true,
preventParentScroll: false,
scrollBarBehavior: null,
scrollThrottle: 10,
draggerThrottle: 10,
observerThrottle: 200,
resizeDebounce: 200,
scrollingPhantomDelay: 1000,
draggingPhantomDelay: 1000,
clsBox: "eb",
clsBoxScrolling: "eb-scrolling",
clsBoxScrollingPhantom: "eb-scrolling-phantom",
clsBoxDragging: "eb-dragging",
clsBoxDraggingPhantomClass: "eb-dragging-phantom",
clsBoxVisibleBarV: "eb-visible-v",
clsBoxInvisibleBarV: "eb-invisible-v",
clsBoxVisibleBarH: "eb-visible-h",
clsBoxInvisibleBarH: "eb-invisible-h",
clsBoxClip: "eb-clip",
clsContent: "eb-content",
clsBarV: "eb-bar-v",
clsBarH: "eb-bar-h",
clsTrack: "eb-track",
clsThumb: "eb-thumb"
6、感谢
vuebar:https://github.com/DominikSerafin/vuebar