【jquery】jquery 自定义滚动条

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 ie，firefox，chrome。

调用方法：

$("#a").jscroll();

demo：

高级应用（自定义滚动条背景及上下按钮）：

调用图片：

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">
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
测试文字
底部
</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>