首页
所有分类
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 相关文章推荐
怎么判断js脚本加载完成
Feb 28 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
不得不分享的JavaScript常用方法函数集（下）
Dec 25 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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
DNA(2) 陨石(1) Athens(1) iPhone(1) iOS15(1) RNA(2) iOS16(1) 富碳陨石(1) iOS(1) 嘧啶碱基(2)
You might like
星际争霸中的热键
2020/03/04 星际争霸
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP读取Excel类文件
2017/05/15 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
js表数据排序 sort table data
2009/02/18 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python自定义类并使用的方法
2015/05/07 Python
python最长回文串算法
2018/06/04 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
匡威爱尔兰官网：Converse爱尔兰
2019/06/09 全球购物
中专自荐信
2013/10/13 职场文书
企业门卫岗位职责
2013/12/12 职场文书
教育合作协议范本
2014/10/17 职场文书
艺术节开幕词
2015/01/28 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书