1.0.7 • Published 7 years ago
virtualscroll v1.0.7
VirtualScroll (虚拟滚动条)
A lightweight custom virtual scrollbar plug-in
一个轻量级的自定义虚拟滚动条, 可以使一个DIV瞬间变身滚动窗口,而且支持个性化配置,可以打造与现有UI统一的分格
注意:不支持 IE9 及以下版本浏览器
示例
请下载这个库,然后打开 examples 文件夹,运行 index.html 查看全部示例
很好很强大,值得拥有!
如需修复bug或增强功能 ,请联系 : 116485961@qq.com
安装方法
npm install virtualscroll --save
推荐使用方法
方法一
const vs = require('virtualscroll ');
let boxa = document.querySelector('.boxa');
vs(boxa, {
// 其它配置项
});
方法二
import vs from 'virtualscroll';
let boxa = document.querySelector('.boxa');
vs(boxa, {
// 其它配置项
});
非构建环境,请直接在页面引入 "node_modules/VirtualScroll/build/VirtualScroll.js"
<script src="node_modules/VirtualScroll/build/VirtualScroll.js"></script> let boxa = document.querySelector('.boxa'); VirtualScroll(boxa, { WheelStep: 50, VSwidth: 8, HSheight: 8, VScursor: 'pointer', VBbgColor: 'rgba(255,255,255, 0)', VSradius: '4px', // 其它配置项... });
参数一:传入一个dom 单对象 (必选参数)
参数二:配置项Obj (可省略的参数,省略以后将使用默认配置项)
返回值:实例对象Object (可以用这个对象调用 public 方法和成员变量)
默认配置项
{ CurrentPosition: [0, 0], // 滑块的当前位置。默认:[0,0], 第1个元素表示水平滚动滑块滑动距离的百分比, 第2个元素表示垂直滚动滑块滑动距离的百分比, 取值 0 - 1,表示百分比 VBwidth: 16, // 垂直滚动条的宽度 默认 16px HBheight: 16, // 水平滚动条的高度 默认 16px VSwidth: 16, // 垂直滑块的宽度 默认 16px HSheight: 16, // 水平滑块的高度 默认 16px VBborder: 'none', // 垂直滚动条的边线 例如: "1px solid #000" 或 "1px solid rgba(255,0,0,.5)" HBborder: 'none', // 水平滚动条的边线 例如: "1px solid #000" 或 "1px solid rgba(255,0,0,.5)" VSborder: 'none', // 垂直滑块的边线 例如: "1px solid #000" 或 "1px solid rgba(255,0,0,.5)" HSborder: 'none', // 水平滑块的边线 例如: "1px solid #000" 或 "1px solid rgba(255,0,0,.5)" VBbgColor: '#f0f0f0', // 垂直滚动条的背景颜色(透明度请用RGBA) HBbgColor: '#f0f0f0', // 水平滚动条的背景颜色(透明度请用RGBA) VSbgColor: '#cdcdcd', // 垂直滚动滑块的背景颜色(透明度请用RGBA) VSoverColor: '#ababab', // 垂直滚动滑块鼠标经过的颜色(透明度请用RGBA) VSclickColor: '#606060', // 垂直滚动滑块鼠标点击的颜色(透明度请用RGBA) HSbgColor: '#cdcdcd', // 水平滚动滑块的背景颜色(透明度请用RGBA) HSoverColor: '#ababab', // 水平滚动滑块鼠标经过的颜色(透明度请用RGBA) HSclickColor: '#606060', // 水平滚动滑块鼠标点击的颜色(透明度请用RGBA) VBradius: '0', // 垂直滚动条圆角 可以输入一个字符串 '4px' 或 '2em 1em 4em / 0.5em 3em' 或 '4px 4px' VSradius: '0', // 垂直滚动滑块圆角 可以输入一个字符串 '4px' 或 '2em 1em 4em / 0.5em 3em' 或 '4px 4px' HBradius: '0', // 水平滚动条圆角 可以输入一个字符串 '4px' 或 '2em 1em 4em / 0.5em 3em' 或 '4px 4px' HSradius: '0', // 水平滚动滑块圆角 可以输入一个字符串 '4px' 或 '2em 1em 4em / 0.5em 3em' 或 '4px 4px' VScursor: 'default', // 鼠标移动到垂直滚动滑块上的形状,默认是 default HScursor: 'default', // 鼠标移动到水平滚动滑块上的形状,默认是 default WheelNeed: true, // 是否需要滚轮滚动,默认是 true , 如果不需要,设置为 false WheelStep: 80, // 滚轮滚动时单步滑动的距离 单位是 px (也包括鼠标点击滚动条时的单步滑动距离) WheelBubble: true, // 当滚轮滚动到底或顶时,是否将事件冒泡到 document , 设置 false 表示不冒泡到 document , true 表示冒泡到 document AutoShow: false, // 鼠标移入时显示移出时隐藏滚动条,true 表示响应鼠标移入移出, false 表示不响应鼠标移入移出 TransitionDuration: '.2s', // 动画的执行时间(影响滚动条的颜色切换时间,影响滑块的透明度切换时间) beforeCreate () {}, // 钩子 渲染之前 ,函数内 this 指向 RootElement created () {}, // 钩子 渲染之后 无参数, 函数内 this 指向 VirtualScroll 实例 wheels (orientation, position) {}, // 钩子 滚轮滚动时执行 orientation 表示滚动方向 'up' 向上滚动 'down' 向下滚动 ,参数 position 是表示垂直滚动条的滑动偏移量 CurrentPosition dragStart (movetype, position) {}, // 钩子 拖动开始 movetype 表示滚动条类型 H 表示水平,V表示垂直 参数 position 是表示垂直滚动条的滑动偏移量 CurrentPosition dragging (orientation, position) {}, // 钩子 拖动进行中 参数1是移动方向 orientation (上'up', 下'down', 左'left', 右'right' ) ,参数 position 是表示垂直滚动条的滑动偏移量 CurrentPosition dragEnd (movetype, position) {} // 钩子 拖动结束 movetype 表示滚动条类型 H 表示水平,V表示垂直 参数 position 是表示垂直滚动条的滑动偏移量 CurrentPosition }