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 连续列表实现代码
Dec 21 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
Element el-button 按钮组件的使用详解
Feb 01 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计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
vue多次循环操作示例
2019/02/08 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
Vue发布项目实例讲解
2019/07/17 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
JS实现打字游戏
2019/12/17 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Python求算数平方根和约数的方法汇总
2016/03/09 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
小学红领巾中秋节广播稿
2014/01/13 职场文书
企业投资意向书
2015/05/09 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书