首页
所有分类
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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
js实现简单的打印表格
Jan 15 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
openGauss(1) 日志(1) 二维码(2) JDBC(3) Post(1) 条码(1) Get(1) 太阳码(1) Word(2) 延时任务(1)
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP 高手之路（三）
2006/10/09 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
如何在PHP中读写文件
2020/09/07 PHP
tagName的使用，留一笔
2006/06/26 Javascript
addRule在firefox下的兼容写法
2006/11/30 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
中学生学习生活的自我评价
2013/10/26 职场文书
应届生人事助理求职信
2013/11/09 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
云台山导游词
2015/02/03 职场文书
民事起诉状范文
2015/05/19 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
Python爬虫之爬取二手房信息
2021/04/27 Python