jQuery自定义滚动条完整实例


Posted in Javascript onJanuary 08, 2016

本文实例讲述了jQuery自定义滚动条实现方法。分享给大家供大家参考,具体如下:

很多时候,由于美观上的考虑,往往需要自定义各种各样的滚动条,因此,本人做了一个demo

运行效果截图如下:

jQuery自定义滚动条完整实例

以下是代码部分:

<html>
  <head>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script>
    $(function(){
      //内容高度
      var content = $("#div2"); 
      //框的高度
      var box = $("#div1");
      //自定义的滚动条
      var scrollbar = $("#div3");
      var scroll=function(content,box,scrollbar){
        var bigHeight = content.height();
        var smallHeight = box.height();
        var rate = smallHeight/bigHeight;
        var h = Math.floor(rate*smallHeight);
        scrollbar.height(h);
        var offset = box.offset()
        var offsetT = offset.top+1;
        scrollbar.mousedown(function(e){
          var divOffsetT = scrollbar.offset().top;
          var tempT = e.pageY-divOffsetT;
          function move(e){
            var newH = e.pageY-tempT-offsetT;
            if(newH<0){
              newH=0;
            }else if(newH>(smallHeight-h)){
              newH=smallHeight-h;
            }
            var rate2 = (newH+h)/smallHeight;
            var contentH = Math.floor(bigHeight*rate2-smallHeight);
            content.css("top",-contentH+"px");
            scrollbar.css("top",newH+"px");
          }
          $("body").on("mousemove",move);
          $("body").mouseup(function(){
            $("body").off("mousemove",move);
          });
        });
      }
      scroll(content,box,scrollbar);
    });
    </script>
    <style>
      *{ margin:0; padding: 0;}
      body{ font-size: 12px;}
      #div1{ width: 200px; height: 300px; margin: 50px auto; position: relative; _overflow: hidden; border: 1px solid #000;}
      #div2{ width: 180px; position: absolute; top: 0; left: 5px;}
      #div3{ width: 10px; position: absolute; top: 0; right:5px; background: #000;}
    </style>
  </head>
  <body>
    <div id="div1">
      <div id="div3"></div>
      <div id="div2">
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
        1<br>
      </div>
    </div>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
  </body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
javascript正则表达式定义(语法)总结
Jan 08 #Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 #Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 #Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 #Javascript
javascript中select下拉框的用法总结
Jan 07 #Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 #Javascript
js创建对象的方法汇总
Jan 07 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
让你的网站首页自动选择语言转跳
2006/12/06 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
python使用cookie库操保存cookie详解
2014/03/03 Python
python结合API实现即时天气信息
2016/01/19 Python
python编程羊车门问题代码示例
2017/10/25 Python
用matplotlib画等高线图详解
2017/12/14 Python
Python 处理文件的几种方式
2019/08/23 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
采购员岗位职责
2013/11/15 职场文书
求职信范文英文版
2014/01/05 职场文书
创意活动策划书
2014/01/15 职场文书
运动会方阵口号
2014/06/07 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015年中秋寄语
2015/07/31 职场文书
计算机实训心得体会
2016/01/14 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书