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 EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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 正则表达式的学习探讨
2013/06/06 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php实现的操作excel类详解
2016/01/15 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
20个常用Python运维库和模块
2018/02/12 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
客户代表自我评价范例
2013/09/24 职场文书
搞笑征婚广告词
2014/03/17 职场文书
春节联欢会策划方案
2014/05/16 职场文书
中秋节随笔
2015/08/15 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL