教你如何用jquery轻松改变滚动条样式

发布时间:2020-09-25编辑:脚本学堂
jquery滚动条样式的设置方法,jquery改变滚动条样式的小例子,通过样式设置避免出现滚动条的原始样子。

jquery/scrollbar/ target=_blank class=infotextkey>jquery滚动条样式

引用两个脚本:jquery.js,jscroll.js;

然后,为要出现滚动条的位置写上overflow:auto;这时会出现滚动条,最原始的样子。

我的滚动条图片,代码说明:
 

复制代码 代码示例:
$("#ee").jscroll({ W:"10px"//设置滚动条宽度
,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(){}//滚动时候触发的方法
});

修改后的jquery滚动条的样式:
jquery滚动条的样式

附,下载地址