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 相关文章推荐
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
JS验证不重复验证码
Feb 10 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
PHP中串行化用法示例
2016/11/16 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
$()JS小技巧
2007/07/21 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
敬老院活动总结
2014/04/28 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
个人总结格式范文
2015/03/09 职场文书
公司庆典主持词
2015/07/04 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
Python字典的基础操作
2021/11/01 Python
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang