基于jQuery的滚动条插件-jquery.jscrollbar
jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件
主要功能
- 支持水平滚动条
- 支持垂直滚动条
- 自动判断水平滚动条和垂直滚动条是否显示
- 支持外部调用来滚动内容
- 支持滚动条部分样式自定义
- 支持键盘方向键控制
- 支持鼠标滚动(需要
mousewheel
插件) - 支持滚动条显示位置设置(外部|悬浮)
- 支持手动更新界面
依赖的库
- jQuery (http://jquery.com/)
- jquery.jqdrag (https://github.com/daiying-zhang/jquery.jqdrag)
- jquery.mousewheel (插件已经包含在本项目中,文件:jquery.mousewheel.min.js)
使用步骤
1.在head
或者body
中引入下列文件:
<!--必须引入--> <script type="text/javascript" src="your-path/jquery-1.8.1.min.js"></script> <!--如果需要支持鼠标滚动则引入,否则可以不引用--> <script type="text/javascript" src="your-path/require/jquery.mousewheel.min.js"></script> <!--必须引入--> <script type="text/javascript" src="your-path/require/jquery.jqdrag-1.0.min.js"></script> <!--必须引入--> <script type="text/javascript" src="your-path/min/jquery.jscrollbar-1.0.2.min.js"></script>
1.
2.
3.
4.
5.
6.
7.
8.
2.
3.
4.
5.
6.
7.
8.
2.设置内容区域的大小:
<!--设置区域大小,包括滚动条--> <div style="width:1300px;height:600px;">Some long text or other elements...</div>
1.
2.
2.
3.调用插件:
<script> $(function(){ $('#test1,#test2').jscrollbar({ //some options }); }); </script>
示例代码
<script> $(function(){ $('#test1,#test2').jscrollbar({ width:12, //滚动条宽度 color:'orange', //滚动条颜色 opacity:0.7, //透明度 position:'inner', //滚动条位置 mouseScrollDirection:'horizontal' //鼠标滚动时滚动的方向 }); var jsb2 = $('#test2').jscrollbar('getObject'); setTimeout(function(){ $('#test2 img').css({width:'4000px'}); //滚动实例的链式调用,无法使用jQuery操作DOM的方法 [不推荐] jsb2.updateUI() .scrollTo('x',100) .scrollBy('x',50); //jQuery的链式调用,可以使用jQuery操作DOM的方法 [推荐] $('#test1').jscrollbar('scrollBy','x',10) .jscrollbar('scrollTo','x',300) .animate({'opacity':0.8},1000); },2000) }); </script>
插件代码
https://github.com/dingo826/jquery.jscrollbar