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，欢迎与我交流： 97532151@qq.com

Site

http://imf2e.com

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