自定义滚动条的样式
兼容firefox、谷歌
$(".dd").jscroll({ W:"12px"//设置滚动条宽度 ,BgUrl:""//设置滚动条背景图片地址 ,Bg:"#ccc"//设置滚动条背景图片position,颜色等 ,Bar:{ Pos:"bottom"//设置滚动条初始化位置在底部 ,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色:鼠标离开(默认),经过 ,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景:鼠标离开(默认),经过,点击 ,Btn:{ btn:true//是否显示上下按钮 false为不显示 ,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景:鼠标离开(默认),经过,点击 ,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景:鼠标离开(默认),经过,点击 ,Fn:function(){}//滚动时候触发的方法 }); <script type="text/javascript"> $(document).ready(function(){ $(".ff").jscroll({ W:"15px" ,BgUrl:"url(/demo/img/s_bg2.gif)" ,Bg:"right 0 repeat-y" ,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 ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"} ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}} ,Fn:function(){} }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $(".ff").jscroll({ W:"15px" ,BgUrl:"url(/demo/img/s_bg3.gif)" ,Bg:"right 0 repeat-y" ,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 ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"} ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}} ,Fn:function(){} }); }); </script>
css设置滚动条的样式:只支持谷歌浏览器
.vertical-scroll::-webkit-scrollbar{width:12px;} .vertical-scroll::-webkit-scrollbar-track{border-left:1px soldi #e0e0e0;background:#d9d9d9d;} .vertical-scroll::-webkit-scrollbar-thumb{background:#a6a6a6;} .horizontal-scroll::-webkit-scrollbar { height: 12px; } .horizontal-scroll::-webkit-scrollbar-track { background: #d9d9d9; } .horizontal-scroll::-webkit-scrollbar-thumb { background: #a6a6a6; }
一个兼容ie8的滚动条插件:http://www.jqueryrain.com/?8OKI7cdR