基于Jquery的模拟滚动条插件,兼容主流浏览器

  doraPlug-scrollPlug

查看demo    下载

 基于jquery的模拟滚动条,带鼠标滚轮事件,兼容主流浏览器,可扩展和配置。第一次尝试写插件,预测代码还有不够完善的地方,如果发现问题,会不断完善,也希望大牛们对发现的问题及时提出来,我会尽快修复。


 需要引用的文件(bootstrap是为了演示效果,非必须):

 

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/scroll.js"></script>


DoraScrollBar表现层接口


使用方法:


new doraScroll(jsonData);


示例:

var doraScroll = new doraScroll({
                container : $('#panel2'), // 作用的容器对象
                contentBox : $('#panelBody2'), // 控制滚动内容的对象
speed : 30, // 滚动速度,即滚轮一次滑动的距离
                color : '#337ab7', // 滚动条颜色
                width : '5px', // 滚动条宽度
                position : 'left', // 滚动条的位置
radius : '6px' // 滚动条的圆角大小

            });


参数配置:


参数

说明

是否必须

container

作用的容器对象

contentBox

控制滚动内容的对象

width

滚动条的宽度设置


speed

滚轮滚动时滚动条滑动距离

color

滚动条颜色

position

滚动条显示位置(left or right)

radius

滚动条圆角大小


DoraScrollBar功能方法接口


方法名

使用示例

说明

reSetScrollBar

myScrollBar.reSetScrollBar();

内容增加后重设滚动条