首页
所有分类
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插件制作 图片走廊 gallery
Aug 17 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
JavaScript中的this机制
Jan 30 Javascript
javascript基础知识
Jun 07 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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
蓝牙(1) 华为(1) 鸿蒙(2) 蓝牙耳机(1) 虚拟键盘(1) Debian(1) 鸿蒙3.0(1) HarmonyOS(1) xhunter1.sys(1) RustDesk(1)
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php输出形式实例整理
2020/05/05 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
理解AngularJs篇：30分钟快速掌握AngularJs
2016/12/23 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python heapq使用详解及实例代码
2017/01/25 Python
PyQT实现多窗口切换
2018/04/20 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
英国卫浴商店：Ergonomic Design
2019/09/22 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
机械专业求职信
2014/05/25 职场文书
个人总结与自我评价
2014/09/18 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
家长评语怎么写
2014/12/30 职场文书
工作证明格式范文
2015/06/15 职场文书
2019职场单身人才调研报告：互联网行业单身比例最高
2019/08/07 职场文书