现在位置首页 / 前端开发 /正文

基于jQuery的滚动条插件-jquery.jscrollbar-使用说明

作者: IT小兵 | 2014年2月12日| 热度:℃ | 评论: |参与:

在项目中,使用div展示较多列表数据,使用浏览器自带的滚动条只能控制整页,所以从网上了找了一些

基于jquery的滚动条插件。其中,jquery.jscrollbar是较为合适和简单的一个插件。

官方地址:

daiying-zhang/jquery.jscrollbar · GitHub

https://github.com/daiying-zhang/jquery.jscrollbar 

作者博客:http://sanjh.cn 

功能介绍:

官方网站已经更新了。请大家下载最新版本!

要功能

  • 支持水平滚动条

  • 支持垂直滚动条

  • 自动判断水平滚动条和垂直滚动条是否显示

  • 支持外部接口调用来滚动内容

  • 支持鼠标滚动

  • 支持滚动条显示位置设置(外部|悬浮)

2.0.X简介

jquery.jscrollbar 2.0.0已经进行重构,相对于1.0.x:

  • 去除了对jquery.jqdrag插件以及jquery.mousewheel的依赖

  • 更轻量

    • 1.0.2: 2.36KB gzipped (7.36KB uncompressed) + jqdrag + jquery.mousewheel

    • 2.0.0: 1.86KB gzipped (4.33KB uncompressed)

  • 更新内容时支持

    • 相对定位

    • 定位到顶部

    • 定位到底部

    • 定位到右侧



jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件

主要功能

  1. 支持水平滚动条

  2. 支持垂直滚动条

  3. 自动判断水平滚动条和垂直滚动条是否显示

  4. 支持外部调用来滚动内容

  5. 支持滚动条部分样式自定义

  6. 支持键盘方向键控制

  7. 支持鼠标滚动(需要mousewheel插件)

  8. 支持滚动条显示位置设置(外部|悬浮)

  9. 支持手动更新界面

依赖的库

  1. jQuery (http://jquery.com/)

  2. jquery.jqdrag (https://github.com/daiying-zhang/jquery.jqdrag)

  3. jquery.mousewheel (插件已经包含在本项目中,文件:jquery.mousewheel.min.js)


使用步骤

1.在<head></head>或者<body></body>中引入下列文件:

<!--必须引入--><script type="text/javascript" src="your-path/jquery-1.8.1.min.js"></script><!--如果需要支持鼠标滚动则引入,否则可以不引用--><script src="your-path/require/jquery.mousewheel.min.js"></script><!--必须引入--><script src="your-path/require/jquery.jqdrag-1.0.min.js"></script><!--必须引入--><script src="your-path/min/jquery.jscrollbar-1.0.2.min.js"></script>
1.
2.
3.
4.
5.
6.
7.
8.

2.设置内容区域的大小:

 Some long text or other elements...

3.调用插件:

$((){
    $().jscrollbar({         
    });
});

示例代码

$((){
        $().jscrollbar({
            width:, 
            color:, 
            opacity:, 
            position:, 
            mouseScrollDirection: 
        });         jsb2  $().jscrollbar();
        setTimeout((){
            $().css({width:});                
                jsb2.updateUI()
                     .scrollTo(,)
                     .scrollBy(,);                
                $().jscrollbar(,,)
                           .jscrollbar(,,)
                           .animate({:},);
        },)
});

 在线演示地址:

http://www.sanjh.cn/plugs/jscrollbar/example/index.html


转发注明:IT分享 http://www.suchso.com 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询