jscroll.js实现QQ软件滚动条

前几天我们刚做过一个滚动条，“scrollbar.js实现竖向滚动条”，当时觉得它实现的功能有点单调，它是通过模拟实现的，就算高度没有超出，滚动条依然存在着，显然用户体验很不好。。。

今天我们还是采用jscroll这个插件来实现滚动条的美化，在10年的时候，我就写过这样的文章，但当时GOOGLE浏览器还没大量使用，结果，现在测试了一下，发现当时做得不兼容，无奈，只能重新搞一个了。。。

那么我们今天要实现的是以QQ软件为例子，因为我们每天都在使用QQ软件，当然，我们只是实现滚动条的功能，其它的做不了。。

脚本方面还是很熟悉的：

 

<script type="text/javascript">$(document).ready(function(){ $("#ee").jscroll({   W:"10px"  ,BgUrl:"url(/myweb/net163/template/net163/cssjs/2012/09/qqscroll/images/s_bg3.gif)"  ,Bg:"-26PX 0 repeat-y"  ,Bar:{Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"},Bg:{Out:"-50px 0 repeat-y",Hover:"-50px 0 repeat-y",Focus:"-50px 0 repeat-y"}},Btn:{btn:true  ,uBg:{Out:"0 0",Hover:"0 0",Focus:"0px 0"}  ,dBg:{Out:"0 -21px",Hover:"0 -21px",Focus:"0 -21px"}}  ,Fn:function(){} });});</script>

我们的滚动条宽度为10PX，地址为images/s_bg3.gif，背景色是通过-50px定位然后循环读出来的，圆角部分，我是通过css3实现的，jscroll-h，这是滑块部分，我将背景色设置为“d8e8c9”，向上的按钮是uBg,向下是dBg，这些，对于习惯CSSSPITE技术的人来说，定位就很清楚了。。

这里跟大家提下在写样式时必须注意的地方：由于里面的图片列表我采用了float，jscroll-e和jscroll-c都要float。。。

以下我提供源文件，欢迎有需要的朋友下载使用：

预览地址：http://www.163css.net/net163/cssjs/2012/09/qqscroll/index.html