zdying / jquery.jscrollbar

jquery.jscrollBar 是一个基于jQuery的滚动条插件

jquery.jscrollbar 2.0.0

jquery.jscrollbar 是一个基于jQuery的滚动条插件，支持水平滚动条和垂直滚动条

---

主要功能

• 支持水平滚动条
• 支持垂直滚动条
• 自动判断水平滚动条和垂直滚动条是否显示
• 支持外部接口调用来滚动内容
• 支持鼠标滚动
• 支持滚动条显示位置设置(外部|悬浮)

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)
• 更新内容时支持
  • 相对定位
  • 定位到顶部
  • 定位到底部
  • 定位到右侧

使用步骤

1.在head中引入样式表文件：

<link rel="stylesheet" href="../src/jquery.jscrollbar.css"/>

2.在body中引入下列文件:

<script type="text/javascript" src="your-path/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="your-path/min/jquery.jscrollbar-2.0.0.min.js"></script>

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

<!--设置区域大小，包括滚动条-->
<div style="width:1300px;height:600px;">Some long text or other elements...</div>

4.调用插件：

$(function(){
    $('#test1,#test2').jscrollbar({
        //some options
    });
});

示例代码

$(function(){
    $('#test1,#test2').jscrollbar({
        width:12, 
        position:'inner'
    });

    setTimeout(function(){
            //jQuery的链式调用，可以使用jQuery操作DOM的方法  [推荐]
            $('#test1').jscrollbar('scrollBy','x',10)
                       .jscrollbar('scrollTo','x',300);
    },2000)
});

重要提示

当调用插件方法jscrollbar后，调用该方法的元素结构已经发生改变，如果要更改滚动区域的内容（比如插入新内容）， 需要首先获取内容显示区域所对应的元素(内容区域拥有jscrollbar的class属性)，然后进行操作，比如：

var $test1 = $('#test1').jscrollbar();
var $content = $test1.find('.jscrollbar');

$content.append('<h3>This text is append by JavaScript</h3>');

E-Mail

如果你有什么好的意见或者建议，或者发现Bug，欢迎与我交流： [email protected]

Site

http://imf2e.com

http://www.imf2e.com/jquery.jscrollbar/

jquery.jscrollbar's Issues

有iframe存在bug

窗体改变时不会自动调整

窗体改变时不会自动调整

关于自定义button触发scrollTo事件

Hi,很高兴能有这么好的插件
我现在有一张长图
希望在图片容器在左右放置“<” ,">"按钮
请问如何对这2个button绑定scrollTo事件？
谢谢