jQuery实现的自定义滚动条实例详解

2019-11-20 08:56:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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="/js/jquery.min.js"></script><script type="text/javascript" src="/js/jquery.jscroll.js"></script><script type="text/javascript">$(function(){  $("#a").jscroll();});</script>

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

调用图片：

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="/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>

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?-1:1;          e.preventDefault();          Func && Func.call(_self);        },false);      }    });  }});$.fn.extend({  jscroll:function(j){    return this.each(function(){      j = j || {}      j.Bar = j.Bar||{};//2级对象      j.Btn = j.Btn||{};//2级对象      j.Bar.Bg = j.Bar.Bg||{};//3级对象      j.Bar.Bd = j.Bar.Bd||{};//3级对象      j.Btn.uBg = j.Btn.uBg||{};//3级对象      j.Btn.dBg = j.Btn.dBg||{};//3级对象      var jun = { W:"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?j.Btn.btn:jun.Btn.btn;          j.Btn.uBg.Out = j.Btn.uBg.Out||jun.Btn.uBg.Out;          j.Btn.uBg.Hover = j.Btn.uBg.Hover||jun.Btn.uBg.Hover;          j.Btn.uBg.Focus = j.Btn.uBg.Focus||jun.Btn.uBg.Focus;          j.Btn.dBg.Out = j.Btn.dBg.Out||jun.Btn.dBg.Out;          j.Btn.dBg.Hover = j.Btn.dBg.Hover||jun.Btn.dBg.Hover;          j.Btn.dBg.Focus = j.Btn.dBg.Focus||jun.Btn.dBg.Focus;      j.Fn = j.Fn||jun.Fn;      var _self = this;      var Stime,Sp=0,Isup=0;      $(_self).css({overflow:"hidden",position:"relative",padding:"0px"});      var dw = $(_self).width(), dh = $(_self).height()-1;      var sw = j.W ? parseInt(j.W) : 21;      var sl = dw - sw      var bw = j.Btn.btn==true ? sw : 0;      if($(_self).children(".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程序设计有所帮助。

上一篇：原生js封装的一些jquery方法(详解)

下一篇：jQuery在ie6下无法设置select选中的解决方法详解