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 相关文章推荐
JS表的模拟方法
Feb 05 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
js实现上传图片预览方法
Oct 25 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
详解javascript脚本何时会被执行
Feb 05 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
PHP回调函数概念与用法实例分析
2017/11/03 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python中kmeans聚类实现代码
2018/02/23 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
质检部岗位职责
2013/11/11 职场文书
高三英语教学反思
2014/01/13 职场文书
团结演讲稿范文
2014/05/23 职场文书
村官个人总结范文
2015/03/03 职场文书
学校国庆节活动总结
2015/03/23 职场文书
2016新年年会主持词
2015/07/06 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
AJAX实现省市县三级联动效果
2021/10/16 Javascript