首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 20, 2016

本文实例讲述了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>

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

调用图片：

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

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实现的自定义滚动条实例详解

- Author -

朱羽佳

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
JS二分查找算法详解
Nov 01 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 #Javascript
jQuery简单倒计时效果完整示例
Sep 20 #Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 #Javascript
jQuery实现的网页换肤效果示例
Sep 20 #Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 #Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 #Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 #Javascript
战锤40K(1) LOL(1) 模拟人生(1) 遗弃(1) 东方异文石(1) 大话西游(1) 铁拳(1) 死亡搁浅(1) 绿林侠盗(1) 吸血鬼(1)
You might like
15种PHP Encoder的比较
2007/04/17 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python实现分段线性插值
2018/12/17 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
python如何变换环境
2020/07/21 Python
欧洲著名的珠宝和手表网上商城：uhrcenter
2017/04/10 全球购物
设计4个线程，其中两个线程每次对j增加1，另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
求职推荐信范文
2013/12/01 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
英语课外活动总结
2014/08/27 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python