您现在的位置是：首页>文档内容页

文档详情

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

doramart 2015-07-17 11:05:24 插件224690

基于jquery的模拟滚动条，带鼠标滚轮事件，兼容主流浏览器，可扩展和配置

基于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	滚动条圆角大小	否