jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！
更新：1.1版本
1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂
2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，显得更为自由
3、增设了滚动条宽度、上下微调按钮高度，滚动文本区域的设置
4、增设了文本内容未超出时是否显示滚动条可选设置选项，如不设置，默认为不显示
5、增设了滚动文本宽度的可选设置选项，如不设置会自动为您适配到最佳宽度
使用方法：
1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件
2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件
3、属性说明：
speed滚动速度，必须
scroll_text滚动文本内容class，必须
sWidth滚动条宽度，必须
updownH上下微调按钮高度，必须
scrollbar文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true
text_width滚动文本宽度，可选
leonaScroll-1.0仅供学习参考使用，该版本为本人学习时思路版，尚有不足，新版本修复了很多问题，但仍然存在着二次调用问题。不过已经有了解决方案，只是本人比较赖，没有修复，等待1.2版本修复吧！哈哈！
当然如果有人使用后遇到bug或者不方便的地方，欢迎提出，以便本人继续改进。
学习之余写的小插件，如有什么不足之处，还望见谅。
最后感谢在本插件开发过程中，帮助和解答过我疑问的朋友。尤其感谢Delevin先生的大力解惑！
废话不说了，附js代码和下载地址
一、Html+Css
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<metacharset="utf-8"/>
<scriptsrc="js/jquery-1.10.2.js"type="text/javascript"></script>
<scriptsrc="js/mousewheel.js"type="text/javascript"></script>
<scriptsrc="js/leonaScroll-min-1.1.js"type="text/javascript"></script>
<styletype="text/css">
.left,.Explain,.center,.welcome,.right,.usage{height:300px;}
.left,.Explain,.Explain_text{width:200px;}
.right,.usage,.usage_text{width:700px;}
.center,.welcome,.welcome_text{width:300px;}
.left,.right,.center{padding:10px;padding-right:0;float:left;margin-right:10px;background-color:#cac9c9;}
.Explain_text,.welcome_text,.usage_text{font-size:14px;line-height:30px;background-color:#cac9c9;color:#000000;}
</style>
</head>
<body>
<divclass="left">
<divclass="Explainsss">
<divclass="Explain_text">
leonaScroll-1.1.js
<br/>介绍：是一款基于jquery框架，结合mousewheel插件实现的自定义滚动条
<br/><spanstyle="color:red">(未超出可显示文本区域时，要求显示滚动条)</span>
</div>
</div>
</div>
<divclass="center">
<divclass="welcome">
<divclass="welcome_text">
leonaScroll-1.1.js
<br/>欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！
<br/>作者：leona
<br/>发布时间：2016-6-16
<br/>博客：<ahref="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a>
<br/><spanstyle="color:red">(未超出可显示文本区域时，默认不显示滚动条)</span>
</div>
</div>
</div>
<divclass="right">
<divclass="usage">
<divclass="usage_text">
leonaScroll-1.1.js
<br/>欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！
<br/>更新：1.1版本
<br/>1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂
<br/>2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，显得更为自由
<br/>3、增设了滚动条宽度、上下微调按钮高度，滚动文本区域的设置
<br/>4、增设了文本内容未超出时是否显示滚动条可选设置选项，如不设置，默认为不显示
<br/>5、增设了滚动文本宽度的可选设置选项，如不设置会自动为您适配到最佳宽度
<br/>使用方法：
<br/>1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件
<br/>2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件
<br/>3、属性说明：
<br/>speed滚动速度，必须
<br/>scroll_text滚动文本内容class，必须
<br/>sWidth滚动条宽度，必须
<br/>updownH上下微调按钮高度，必须
<br/>scrollbar文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true
<br/>text_width滚动文本宽度，可选
</div>
</div>
</div>
<scripttype="text/javascript">
//滚动条调用方法
$(".Explain").LeonaScroll({speed:20,scroll_text:".Explain_text",sWidth:14,updownH:20,scrollbar:false});
$(".welcome").LeonaScroll({speed:20,scroll_text:".welcome_text",sWidth:14,updownH:20});
$(".usage").LeonaScroll({speed:20,scroll_text:".usage_text",sWidth:14,updownH:20});
</script>
</body>
</html>
二、Jquery
$.fn.extend({
generateUUID:function(){
//唯一ID数值生成
vard=newDate().getTime();
varuuid='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){
varr=(d+Math.random()*16)%16|0;d=Math.floor(d/16);return(c=='x'?r:(r&0x7|0x8)).toString(16);
});returnuuid;
},
LeonaScroll:function(parameter){
varSname=$(this).selector;
returnthis.each(function(){
//变量声明
varelem=$(this),celem=$(this).find(parameter.scroll_text),index=$(this).generateUUID(),text_hidden=$(elem).height(),con_width=$(elem).width();
//添加滚动条Html
varscrollHTML="";
scrollHTML+="<divclass='scroll_upleonaup"+index+"'></div>";
scrollHTML+="<divclass='scroll_cenleonacen"+index+"'><divclass='scroll_buttonleonabutton"+index+"'></div></div>";
scrollHTML+="<divclass='scroll_downleonadown"+index+"'></div>";
$(elem).append("<divclass='scrollleonas"+index+"'>"+scrollHTML+"</div>");
//添加滚动条CSS
varscrollStyle="";
scrollStyle+="body{-moz-user-select:none;/*火狐*/-webkit-user-select:none;/*webkit浏览器*/-ms-user-select:none;/*IE10*/-khtml-user-select:none;/*早期浏览器*/user-select:none;}";
scrollStyle+=Sname+"{position:relative;overflow-y:hidden;clear:none}";
scrollStyle+=parameter.scroll_text+"{width:"+(parameter.text_width===undefined?(con_width-parameter.sWidth):parameter.text_width)+"px;word-break:break-word;position:absolute;left:0;top:0;clear:both;}";
scrollStyle+=".scroll{height:"+text_hidden+"px;float:right;}\r\n";
scrollStyle+=".scroll,.scroll.scroll_cen,.scroll.scroll_up,.scroll.scroll_down{width:"+parameter.sWidth+"px;}";
scrollStyle+=".scroll.scroll_up,.scroll.scroll_down{height:"+parameter.updownH+"px;line-height:"+parameter.updownH+"px;color:#ffffff;font-size:12px;font-weight:bold;background-image:url(/img/bw.png);background-color:#161515;background-repeat:no-repeat;cursor:pointer;}";
scrollStyle+=".scroll.scroll_up{background-position:0px6px;border-radius:5px5px00;}";
scrollStyle+=".scroll.scroll_down{background-position:0px-49px;border-radius:005px5px;}";
scrollStyle+=".scroll.scroll_up:hover{background-position:0px-11px;}";
scrollStyle+=".scroll.scroll_down:hover{background-position:0px-31px;}";
scrollStyle+=".scroll.scroll_cen{height:"+(text_hidden-parameter.updownH*2)+"px;background-color:#777676;position:relative;}";
scrollStyle+=".scroll.scroll_cen.scroll_button{width:"+(parameter.sWidth-2)+"px;margin:0px1px;background:url(/img/tiao.jpg)repeat-y00;border-radius:5px;position:absolute;cursor:pointer;}";
$("head").append("<styletype='text/css'>"+scrollStyle+"</style>");
//变量声明
vartext_show=$(celem).height(),scroll_b=$(".leonabutton"+index+""),text_p=text_hidden/text_show,bH_max=$(".leonas"+index+".leonacen"+index+"").height(),bH=text_p*bH_max;
if(parameter.scrollbar==true||parameter.scrollbar===undefined){
if(text_p>=1)$(".leonas"+index+"").css("display","none");else{$(".leonas"+index+"").css("display","block");scroll_b.css("height",bH+"px");}
}elsereturn;
//鼠标拖动div事件
varneedMove=false,mouseY=0;
scroll_b.mousedown(function(event){needMove=true;varbH_Top=scroll_b.position().top;mouseY=event.pageY-bH_Top;});
$(document).mouseup(function(event){needMove=false;});
$(document).mousemove(function(event){
if(needMove){
varsMouseY=event.pageY,bH_Top=sMouseY-mouseY,textY=bH_Top/bH_max*text_show;
if(bH_Top<=0)scroll_b.css("top",0);$(celem).css("top",0);return;
if(bH_Top>=bH_max-bH)scroll_b.css("top",bH_max-bH);$(celem).css("top",text_hidden-text_show);return;
scroll_b.css("top",bH_Top);$(celem).css("top",-textY);
}return;
});
//定义上下滚动规则
functiongoGun(direction,timer){
bH_Top=scroll_b.position().top;
varh=0;h+=parameter.speed;//调节滑动速度
if(direction==1){//up
varToping=bH_Top-h;
if(bH_Top<=0||Toping<=0){
scroll_b.css("top",0);$(celem).css("top",0);
if(timer==2)clearInterval(goThread);//needtimer
return;
}
scroll_b.css("top",bH_Top-h);
};
if(direction==-1){//down
varDowning=bH_Top+h;
if(bH_Top>=bH_max-bH||Downing>=bH_max-bH){
scroll_b.css("top",bH_max-bH);
$(celem).css("top",text_hidden-text_show);
if(timer==2)clearInterval(goThread);//needtimer
return;
}
scroll_b.css("top",bH_Top+h);
}
vartextY=bH_Top/bH_max*text_show;
$(celem).css("top",-textY);
};
//上下微调按钮事件
functionminTiao(minTB,d,t){
vargoThread="";
minTB.mouseup(function(){clearInterval(goThread);});
minTB.mousedown(function(){
clearInterval(goThread);
goThread=setInterval(function(){goGun(d,t);},300);
});
minTB.click(function(){goGun(d);});
};
minTiao($(".leonaup"+index+""),1,2);//up
minTiao($(".leonadown"+index+""),-1,2);//down
//滚轮事件
if(text_p<1){
$(elem).bind("mousewheel",function(event,delta,deltaX,deltaY){
if(delta==1){//up
goGun(1,0);
if(scroll_b.position().top!=0)
returnfalse;
}if(delta==-1){//down
goGun(-1,0);
if(Math.ceil(scroll_b.position().top)!=Math.ceil(bH_max-bH))
returnfalse;
}
});
}
});
}
});
以上所述是小编给大家介绍的jQueryleonaScroll1.1自定义滚动条插件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！