基于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 | 滚动条圆角大小 | 否 |
DoraScrollBar功能方法接口
方法名 | 使用示例 | 说明 |
reSetScrollBar | myScrollBar.reSetScrollBar(); | 内容增加后重设滚动条 |
相关文章
- 第五天——范式路由之泛式路由实现
- 第五天——范式路由之使用例子
- Node.js API实例讲解——node.js网络模块
- Node.js API实例讲解——数据的加密与解密
- HTML5 input Placeholder(占位符)样式
- Node.js API实例讲解——http.IncomingMessage
- FIS3 , 为你定制的前端工程构建工具
- Node.js API实例讲解——Buffer的写入方法
- Node.js API实例讲解——Socket 对象
- Node.js API实例讲解——创建http服务器
- Node.js API实例讲解——Buffer的静态方法
- Node.js API实例讲解——https服务器与客户端