方式1：
先上一张效果图
$(document).ready(function(){
$("#cc").jscroll({
W:"11px"//设置滚动条宽度
,H:"76"//设置滚动条高度 还不够完美
,BgUrl:"url(p_w_picpaths/scrollabc.gif)"//设置滚动条背景图片地址
,Bg:"none"//设置滚动条背景图片position,颜色等
,Bar:{ Bd:{Out:"orange",Hover:"orange"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
,Bg:{Out:"-13px 0 no-repeat",Hover:"-13px 0 no-repeat",Focus:"-13px 0 no-repeat"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
,Btn:{ btn:false//是否显示上下按钮 false为不显示
,uBg:{Out:"black",Hover:"#black",Focus:"orange"}//设置上按钮背景：鼠标离开(默认)，经过，点击
,dBg:{Out:"black",Hover:"#black",Focus:"orange"}
}//设置下按钮背景：鼠标离开(默认)，经过，点击
,Fn:function(){}//滚动时候触发的方法
});
});
今天又做了一个滚动条的例子
滚动条的图片需要用这种格式
这种就能避免滚动条背景留白的瑕疵 （,H:"76"//设置滚动条高度 还不够完美）
制作的最终效果图
html代码
废话不多说 直接上附件
方式2:
需要导入<script type="text/javascript" src="js/func_scroll.js"></script>
具体代码 js部分
<script type="text/javascript">
// <![CDATA[
var scroller = null;
var scrollbar = null;
window.onload = function () {
var scroller3 = null;
var scrollbar3 = null;
scroller3 = new Scrolling.Scroller(document.getElementById("scroll3"), 486, 178);
scrollbar3 = new Scrolling.Scrollbar(document.getElementById("Scrollbar-Container3"), scroller3, new Scrolling.ScrollTween());
}
// ]]>
</script>
html 部分
<div id="scroll3">
<div class="Scroller-Container3">
内容
</div>
</div>
/*下面是滚动条位置*/
<div id="Scrollbar-Container3">
<div class="Scrollbar-Track">
<img src="p_w_picpaths/slider.png" class="Scrollbar-Handle" />
</div>
</div>
css部分
#scroll3 {height: 500px; left: 398px;overflow: hidden; position: absolute;top: 260px;width: 670px;z-index: -99999; }
#scroll3 .Scroller-Container3 {position: absolute;left: 0;top: 0;width: 720px;}
#Scrollbar-Container3 {position: absolute;left: 1050px;top: 270px;width: 16px;height: 178px;z-index: -99999; }
#Scrollbar-Container3 .Scrollbar-Track {position: absolute;left: 0;top: 0;width: 16px;height: 500px; background:url(../p_w_picpaths/abc6.png) no-repeat -4px 0;}
#Scrollbar-Container3 .Scrollbar-Handle {position: absolute;left: 0;top: 0;width: 16px;height: 16px;cursor: pointer;}
实现效果如下图：
