首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

jQuery自定义滚动条完整实例

- Author -

leo列

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
基于vue的短信验证码倒计时demo
Sep 13 Javascript
bootstrap响应式导航条模板使用详解（含下拉菜单，弹出框）
Nov 17 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 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
MX500(1) S2000(3) 再生机(1) YB400(2) 直流胆(1) 1 Tube Radio(1) YB235(1) 森海(1) 东方红(1) YB217(1)
You might like
再说下636单管机
2021/03/02 无线电
详解：――如何将图片储存在数据库里
2006/12/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（八）
2014/06/23 PHP
php学习笔记之基础知识
2014/11/08 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
班级文化建设标语
2014/06/23 职场文书
怎样写离婚协议书
2014/09/10 职场文书
大学生助学金感谢信
2015/01/21 职场文书
教育教学读书笔记
2015/07/02 职场文书
学校体育节班级口号
2015/12/25 职场文书
2019西餐厅创业计划书范文！
2019/07/12 职场文书