可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 ie，firefox，chrome。
调用方法：
$("#a").jscroll();
demo：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> <link rel="stylesheet" type="text/css" href="/css/base.min.css" media="all"/> <style type="text/css"> #a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;} </style> </head> <body> <div id="a"> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>底部</p> </div> </body> </html> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.jscroll.js"></script> <script type="text/javascript"> $(function(){ $("#a").jscroll(); }); </script>
高级应用（自定义滚动条背景及上下按钮）：
调用图片：
demo：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> <link rel="stylesheet" type="text/css" href="/css/base.min.css" media="all"/> <style type="text/css"> #a{width:500px;overflow:hidden;position:relative;height:200px;background:#f5f5f5;} </style> </head> <body> <div id="a"> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>测试文字</p> <p>底部</p> </div> </body> </html> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.jscroll.js"></script> <script type="text/javascript"> $(function(){ $("#a").jscroll({ W:"15px", //设置滚动条宽度 BgUrl:"url(/images/s_bg2.gif)", //设置滚动条背景图片地址 Bg:"right 0 repeat-y", //设置滚动条背景图片position,颜色等 Bar:{ Pos:"bottom", //设置滚动条初始化位置在底部 Bd:{ //设置滚动滚轴边框颜色：鼠标离开(默认)，经过 Out:"#a3c3d5", Hover:"#b7d5e6" }, Bg:{ //设置滚动条滚轴背景：鼠标离开(默认)，经过，点击 Out:"-45px 0 repeat-y", Hover:"-58px 0 repeat-y", Focus:"-71px 0 repeat-y" } }, Btn:{ btn:true, //是否显示上下按钮 false为不显示 uBg:{ //设置上按钮背景：鼠标离开(默认)，经过，点击 Out:"0 0", Hover:"-15px 0", Focus:"-30px 0" }, dBg:{ //设置下按钮背景：鼠标离开(默认)，经过，点击 Out:"0 -15px", Hover:"-15px -15px", Focus:"-30px -15px" } }, Fn:function(){} //滚动时候触发的方法 }); }); </script>
下载 --> jquery.jscroll.js