本文实例讲述了jQuery实现的自定义滚动条。分享给大家供大家参考，具体如下：
可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容 ie，firefox，chrome。
调用方法：
$("#a").jscroll();
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">
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>底部</p>
</div>
</body>
</html>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">
高级应用（自定义滚动条背景及上下按钮）：
调用图片：
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">
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>底部</p>
</div>
</body>
</html>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">
jquery.jscroll.js：
/**
*
* Copyright (c) 2009 May(qq104010230)
* http://www.winwill.com
* http://www.winwill.com/jquery/jscroll.html
* admin@winwill.com
*/
/*--------------------------------------------------------------------------------------------------*/
$.fn.extend({//添加滚轮事件//by jun
mousewheel:function(Func){
return this.each(function(){
var _self = this;
_self.D = 0;//滚动方向
if($.browser.msie||$.browser.safari){
_self.onmousewheel=function(){_self.D = event.wheelDelta;event.returnValue = false;Func && Func.call(_self);};
}else{
_self.addEventListener("DOMMouseScroll",function(e){
_self.D = e.detail>0"15px"
,BgUrl:""
,Bg:"#efefef"
,Bar:{ Pos:"up"
,Bd:{Out:"#b5b5b5",Hover:"#ccc"}
,Bg:{Out:"#fff",Hover:"#fff",Focus:"orange"}}
,Btn:{ btn:true
,uBg:{Out:"#ccc",Hover:"#fff",Focus:"orange"}
,dBg:{Out:"#ccc",Hover:"#fff",Focus:"orange"}}
,Fn:function(){}}
j.W = j.W||jun.W;
j.BgUrl = j.BgUrl||jun.BgUrl;
j.Bg = j.Bg||jun.Bg;
j.Bar.Pos = j.Bar.Pos||jun.Bar.Pos;
j.Bar.Bd.Out = j.Bar.Bd.Out||jun.Bar.Bd.Out;
j.Bar.Bd.Hover = j.Bar.Bd.Hover||jun.Bar.Bd.Hover;
j.Bar.Bg.Out = j.Bar.Bg.Out||jun.Bar.Bg.Out;
j.Bar.Bg.Hover = j.Bar.Bg.Hover||jun.Bar.Bg.Hover;
j.Bar.Bg.Focus = j.Bar.Bg.Focus||jun.Bar.Bg.Focus;
j.Btn.btn = j.Btn.btn!=undefined"hidden",position:"relative",padding:"0px"});
var dw = $(_self).width(), dh = $(_self).height()-1;
var sw = j.W ".jscroll-c").height()==null){//存在性检测
$(_self).wrapInner("<div class='jscroll-c' style='top:0px;z-index:9999;zoom:1;position:relative'></div>");
$(_self).children(".jscroll-c").prepend("<div style='height:0px;overflow:hidden'></div>");
$(_self).append("<div class='jscroll-e' unselectable='on' style=' height:100%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;'><div class='jscroll-u' style='position:absolute;top:0px;width:100%;left:0;background:blue;overflow:hidden'></div><div class='jscroll-h' unselectable='on' style='background:green;position:absolute;left:0;-moz-user-select:none;border:1px solid'></div><div class='jscroll-d' style='position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden'></div></div>");
}
var jscrollc = $(_self).children(".jscroll-c");
var jscrolle = $(_self).children(".jscroll-e");
var jscrollh = jscrolle.children(".jscroll-h");
var jscrollu = jscrolle.children(".jscroll-u");
var jscrolld = jscrolle.children(".jscroll-d");
if($.browser.msie){document.execCommand("BackgroundImageCache", false, true);}
jscrollc.css({"padding-right":sw});
jscrolle.css({width:sw,background:j.Bg,"background-image":j.BgUrl});
jscrollh.css({top:bw,background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out,width:sw-2});
jscrollu.css({height:bw,background:j.Btn.uBg.Out,"background-image":j.BgUrl});
jscrolld.css({height:bw,background:j.Btn.dBg.Out,"background-image":j.BgUrl});
jscrollh.hover(function(){if(Isup==0)$(this).css({background:j.Bar.Bg.Hover,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Hover})},function(){if(Isup==0)$(this).css({background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out})})
jscrollu.hover(function(){if(Isup==0)$(this).css({background:j.Btn.uBg.Hover,"background-image":j.BgUrl})},function(){if(Isup==0)$(this).css({background:j.Btn.uBg.Out,"background-image":j.BgUrl})})
jscrolld.hover(function(){if(Isup==0)$(this).css({background:j.Btn.dBg.Hover,"background-image":j.BgUrl})},function(){if(Isup==0)$(this).css({background:j.Btn.dBg.Out,"background-image":j.BgUrl})})
var sch = jscrollc.height();
//var sh = Math.pow(dh,2) / sch ;//Math.pow(x,y)x的y次方
var sh = (dh-2*bw)*dh / sch
if(sh<10){sh=10}
var wh = sh/6//滚动时候跳动幅度
// sh = parseInt(sh);
var curT = 0,allowS=false;
jscrollh.height(sh);
if(sch<=dh){jscrollc.css({padding:0});jscrolle.css({display:"none"})}else{allowS=true;}
if(j.Bar.Pos!="up"){
curT=dh-sh-bw;
setT();
}
jscrollh.bind("mousedown",function(e){
j['Fn'] && j['Fn'].call(_self);
Isup=1;
jscrollh.css({background:j.Bar.Bg.Focus,"background-image":j.BgUrl})
var pageY = e.pageY ,t = parseInt($(this).css("top"));
$(document).mousemove(function(e2){
curT =t+ e2.pageY - pageY;//pageY浏览器可视区域鼠标位置，screenY屏幕可视区域鼠标位置
setT();
});
$(document).mouseup(function(){
Isup=0;
jscrollh.css({background:j.Bar.Bg.Out,"background-image":j.BgUrl,"border-color":j.Bar.Bd.Out})
$(document).unbind();
});
return false;
});
jscrollu.bind("mousedown",function(e){
j['Fn'] && j['Fn'].call(_self);
Isup=1;
jscrollu.css({background:j.Btn.uBg.Focus,"background-image":j.BgUrl})
_self.timeSetT("u");
$(document).mouseup(function(){
Isup=0;
jscrollu.css({background:j.Btn.uBg.Out,"background-image":j.BgUrl})
$(document).unbind();
clearTimeout(Stime);
Sp=0;
});
return false;
});
jscrolld.bind("mousedown",function(e){
j['Fn'] && j['Fn'].call(_self);
Isup=1;
jscrolld.css({background:j.Btn.dBg.Focus,"background-image":j.BgUrl})
_self.timeSetT("d");
$(document).mouseup(function(){
Isup=0;
jscrolld.css({background:j.Btn.dBg.Out,"background-image":j.BgUrl})
$(document).unbind();
clearTimeout(Stime);
Sp=0;
});
return false;
});
_self.timeSetT = function(d){
var self=this;
if(d=="u"){curT-=wh;}else{curT+=wh;}
setT();
Sp+=2;
var t =500 - Sp*50;
if(t<=0){t=0};
Stime = setTimeout(function(){self.timeSetT(d);},t);
}
jscrolle.bind("mousedown",function(e){
j['Fn'] && j['Fn'].call(_self);
curT = curT + e.pageY - jscrollh.offset().top - sh/2;
asetT();
return false;
});
function asetT(){
if(curT<bw){curT=bw;}
if(curT>dh-sh-bw){curT=dh-sh-bw;}
jscrollh.stop().animate({top:curT},100);
var scT = -((curT-bw)*sch/(dh-2*bw));
jscrollc.stop().animate({top:scT},1000);
};
function setT(){
if(curT<bw){curT=bw;}
if(curT>dh-sh-bw){curT=dh-sh-bw;}
jscrollh.css({top:curT});
var scT = -((curT-bw)*sch/(dh-2*bw));
jscrollc.css({top:scT});
};
$(_self).mousewheel(function(){
if(allowS!=true) return;
j['Fn'] && j['Fn'].call(_self);
if(this.D>0){curT-=wh;}else{curT+=wh;};
setT();
})
});
}
});
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
标签：
jQuery,自定义,滚动条
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“jQuery实现的自定义滚动条实例详解”评论...
更新动态
2024年11月13日
2024年11月13日
- 群星《华语贺年金曲》K2HD[WAV+CUE][697M]
- 群星《酒廊夜色美》2CD[DTS-WAV]
- 群星《2024好听新歌35》AI调整音效【WAV分轨】
- 神秘园《讲故事的人》2019[FLAC+CUE/整轨]
- 张智霖VS许秋怡.1991-现代爱情故事【永高创意】【WAV+CUE】
- 忧欢派对.1988-忧欢派对【飞碟】【WAV+CUE】
- 群星.2009-他的沧海遗珠精选（金碟铁盒珍藏系列）【SONY】【WAV+CUE】
- 刘德华《经典金曲》[WAV+CUE][833M]
- 邓丽君《千言万语》SACD德国限量版[低速原抓WAV+CUE][1G]
- 王闻VS曼里《不老情歌》经典粤语情歌[低速原抓WAV分轨][1G]
- 英雄联盟faker有多少联赛冠军 faker联赛冠军数量介绍
- 炉石传说酒馆战棋分数等级段位介绍 酒馆战棋分数最新等级划分一览
- 野狗子奇才三姐怎么收集 野狗子奇才三姐收集攻略
- 香港群星《电影歌曲101》6CD[WAV整轨]
- 发烧民乐-心灵乐赏系列4CD[WAV+CUE整轨]