jQuery插件：Tiny Scrollbar滚动条插件（滚动条美化、默认滚动条）

Tiny Scrollbar是基于jQuery的滚动条插件, 风格简洁, 可自定义样式, 体积较小。

插件特点：

• 支持iPhone, iPad, Android
• 新版1.8，可以在移动设备上滚动内容
• 可以在水平方向和垂直方向滚动
• 支持滚轮,拇指、跟踪、触摸。
• 它有一个更新函数,这样它就可以处理内容的变化。
• 拇指大小的滚动条,可以设置为自动或固定数量
• 容易定制
• 支持正常的滚动和移动风格转化的滚动。
• 轻量级其只有100行代码。大小是2,29 kb
• 样式可以自己设置，很自由。

使用的方法很简单。前提你要调用jquery文件，像这样：

<script src="http://www.qingdou.me/jquery.js" type="text/javascript"></script>
<script src="http://www.qingdou.me/jquery.tinyscrollbar.min.js" type="text/javascript"></script>//滚动条插件文件

tiny scrollbar 下载

接下来我们来看一下具体是怎么使用的？
调用Jquery文件后，只需在页面调用

$('#scrollbar1').tinyscrollbar();

html代码：

<div id="scrollbar1">//调用外包类名是不可以改的
	<div class="scrollbar">
		<div class="track">
			<div class="thumb"><div class="end"></div></div>
		</div>
	</div>//滚动条样式，track为滚动条轨道，thumb为滚动按钮，end可以设置滚动按钮上或下的样式。
	<div class="viewport">相对定位层，内容在这里滚动
		<div class="overview">要滚动条的内容，在它的里面可以防止你想滚动的任何内容
			<h3>Magnis dis parturient montes</h3>//这些是可以更改的区域
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.</p>
			 
			<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.</p>
		</div>
	</div>
</div>

css样式：

#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }
.noSelect { user-select

部分需要自己的需要调整，滚动条样式等。上面是一个简单的例子

如何滚动横向的内容呢？

$('#scrollbar2').tinyscrollbar({ axis: 'x'});

相关样式：

/* Tiny Scrollbar scrollbar2 */
#scrollbar2 { width: 251px; margin: 20px 0 10px; }
#scrollbar2 .viewport { width: 236px; height: 125px; overflow: hidden; position: relative; }
#scrollbar2 .overview { list-style: none; width: 1416px; padding: 0; margin: 0; position: absolute; left: 0; top: 0; }
#scrollbar2 .scrollbar{ position: relative; margin: 0 0 5px; clear: both; height: 15px; }
#scrollbar2 .track { background:#ccc; width: 100%; height:5px; position: relative; }
#scrollbar2 .thumb { background:#cc0071; height: 5px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: 0; }
#scrollbar2 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -

如何改变轨道大小track

$('#scrollbar1').tinyscrollbar({size:100});

如何改变滚动按钮大小thumb

$('#scrollbar1').tinyscrollbar({sizethumb: 15});

当内容不是固定的，是变化的那就要这样写

$('#scrollbar1').tinyscrollbar_update(num);

num为数字，自然数，可以使滚动条到相应的位置。如

$('#scrollbar1').tinyscrollbar_update(50);

那么滚动条就会在50px的位置。

最后要说到的，如果内容没有超出滚动条就不会显示，那就要在样式上加上如下：

#scrollbar1 .disable { display: none; }

呵呵，这是jquery插件的开篇文章，希望能有更多的人看到它。

点击下载插件

今天就写这么多吧，不懂的可以给我留言，或加我们的交流群，最后我们来看看效果吧

点此查看实例展示（Demo）

转载：青豆前端 » jQuery插件：Tiny Scrollbar滚动条插件（滚动条美化、默认滚动条）