1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {margin: 0;padding: 0;}
  8.         .box {
  9.             width: 300px;
  10.             height: 500px;
  11.             border: 1px solid red;
  12.             margin: 100px;
  13.             position: relative;
  14.  
  15.             overflow: hidden;
  16.  
  17.             /* 不让文字被选中 */
  18.             -webkit-user-select:none;
  19.             -moz-user-select:none;
  20.             -ms-user-select:none;
  21.             user-select:none;
  22.         }
  23.         .content {
  24.             padding: 5px 18px 5px 5px;
  25.             position: absolute;
  26.             top: 0;
  27.             left: 0;
  28.  
  29.         }
  30.         .scroll {
  31.             width: 18px;
  32.             height: 100%;
  33.             position: absolute;
  34.             top: 0;
  35.             right: 0;
  36.             background-color: #eee;
  37.         }
  38.         .bar {
  39.             height: 100px;
  40.             width: 100%;
  41.             position: absolute;
  42.             top: 0;
  43.             left: 0;
  44.             background-color: red;
  45.             border-radius:  10px;
  46.             cursor: pointer;
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51. <div class="box" id="box">
  52.     <div class="content" id="content">
  53.        我是文字内容，我是文字内容，我是文字内容，
  54.         我是文字内容，我是文字内容，我是文字内容，
  55.         我是文字内容，我是文字内容，我是文字内容，
  56.         我是文字内容，我是文字内容，我是文字内容，
  57.         我是文字内容，我是文字内容，我是文字内容，
  58.        我是文字内容，我是文字内容，我是文字内容，
  59.         我是文字内容，我是文字内容，我是文字内容，
  60.         我是文字内容，我是文字内容，我是文字内容，
  61.         我是文字内容，我是文字内容，我是文字内容，
  62.         我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
  63.         我是文字内容，我是文字内容，我是文字内容，
  64.         我是文字内容，我是文字内容，我是文字内容，
  65.         我是文字内容，我是文字内容，我是文字内容，
  66.         我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
  67.         我是文字内容，我是文字内容，我是文字内容，
  68.         我是文字内容，我是文字内容，我是文字内容，
  69.         我是文字内容，我是文字内容，我是文字内容，
  70.         我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
  71.         我是文字内容，我是文字内容，我是文字内容，
  72.         我是文字内容，我是文字内容，我是文字内容，
  73.         我是文字内容，我是文字内容，我是文字内容，
  74.         我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
  75.         我是文字内容，我是文字内容，我是文字内容，
  76.         我是文字内容，我是文字内容，我是文字内容，
  77.         我是文字内容，我是文字内容，我是文字内容，
  78.         我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
  79.         我是文字内容，我是文字内容，我是文字内容，
  80.         我是文字内容，我是文字内容，我是文字内容，
  81.         我是文字内容，我是文字内容，我是文字内容，
  82.         我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
  83.         我是文字内容，我是文字内容，我是文字内容，
  84.         我是文字内容，我是文字内容，我是文字内容，
  85.         我是文字内容，我是文字内容，我是文字内容，
  86.         我是文字内容，我是文字内容，我是文字内容，
  87.  
  88.     </div>
  89.     <div class="scroll" id="scroll">
  90.         <div class="bar" id="bar"></div>
  91.     </div>
  92. </div>
  93. <script src="common.js"></script>
  94. <script>
  95.   var box = my$('box');
  96.   var content = my$('content');
  97.   var scroll = my$('scroll');
  98.   var bar = my$('bar');
  99.   //1 根据内容的大小，计算滚动条的高度
  100.   //  滚动条的高度 / scroll的高度 = box的高度 / 内容的高度
  101.   // offsetHeight     元素的大小 + padding + border
  102.   // clientHeight     元素的大小 + padding
  103.   // scrollHeight     内容的大小 + padding
  104.  
  105.   // 当内容的高度大于box的高度，再计算 滚动条的高度，否则的话滚动条的高度为0
  106.   var barHeight = 0;
  107.   if (content.scrollHeight > box.clientHeight) {
  108.     barHeight = box.clientHeight / content.scrollHeight * scroll.clientHeight;
  109.   }
  110.   bar.style.height = barHeight + 'px';
  111.  
  112.   //2 让滚动条能够拖拽
  113.   // 2.1 当鼠标按下的时候，求鼠标在滚动条中的位置
  114.   bar.onmousedown = function (e) {
  115.     e = e || window.event;
  116.  
  117.     // 鼠标在滚动条中的位置
  118.     var y = getPage(e).pageY - bar.offsetTop - box.offsetTop;
  119.     // 2.2 当鼠标在页面上移动的时候，求滚动条的位置
  120.     document.onmousemove = function (e) {
  121.         //求滚动条的位置
  122.         var barY = getPage(e).pageY - y - box.offsetTop;
  123.  
  124.         // 控制bar不能移除scroll
  125.         barY = barY < 0 ? 0 : barY;
  126.         barY = barY > scroll.clientHeight - bar.clientHeight ? scroll.clientHeight - bar.clientHeight : barY;
  127.  
  128.         bar.style.top = barY + 'px';
  129.  
  130.         //3 当拖拽滚动条的时候，改变内容的位置
  131.  
  132.         // 内容滚动的距离 / 内容最大能够滚动的距离 = 滚动条滚动的距离 / 滚动条最大能够滚动的距离
  133.  
  134.         // 内容最大能够滚动的距离
  135.         var contentMax = content.scrollHeight - box.clientHeight;
  136.         // 滚动条最大能够滚动的距离
  137.         var barMax = scroll.clientHeight - bar.clientHeight;
  138.  
  139.         var contentY = barY / barMax * contentMax;
  140.         content.style.top = -contentY + 'px';
  141.     }
  142.   }
  143.  
  144.   document.onmouseup = function () {
  145.     // 移除鼠标移动的事件
  146.     document.onmousemove = null;
  147.   }
  148.  
  149. </script>
  150. </body>
  151. </html>

common中的代码

  1. function my$(id) {
  2.   return document.getElementById(id);
  3. }
  4.  
  5. // 处理浏览器兼容性
  6. // 获取第一个子元素
  7. function getFirstElementChild(element) {
  8.     var node, nodes = element.childNodes, i = 0;
  9.     while (node = nodes[i++]) {
  10.         if (node.nodeType === 1) {
  11.             return node;
  12.         }
  13.     }
  14.     return null;
  15. }
  16.  
  17. // 处理浏览器兼容性
  18. // 获取下一个兄弟元素
  19.  function getNextElementSibling(element) {
  20.     var el = element;
  21.     while (el = el.nextSibling) {
  22.       if (el.nodeType === 1) {
  23.           return el;
  24.       }
  25.     }
  26.     return null;
  27.   }
  28.  
  29. // 处理innerText和textContent的兼容性问题
  30. // 设置标签之间的内容
  31. function setInnerText(element, content) {
  32.   // 判断当前浏览器是否支持 innerText
  33.   if (typeof element.innerText === 'string') {
  34.     element.innerText = content;
  35.   } else {
  36.     element.textContent = content;
  37.   }
  38. }
  39.  
  40. // 处理注册事件的兼容性问题
  41. // eventName, 不带on，  click  mouseover  mouseout
  42. function addEventListener(element, eventName, fn) {
  43.   // 判断当前浏览器是否支持addEventListener 方法
  44.   if (element.addEventListener) {
  45.     element.addEventListener(eventName, fn);  // 第三个参数 默认是false
  46.   } else if (element.attachEvent) {
  47.     element.attachEvent('on' + eventName, fn);
  48.   } else {
  49.     // 相当于 element.onclick = fn;
  50.     element['on' + eventName] = fn;
  51.   }
  52. }
  53.  
  54. // 处理移除事件的兼容性处理
  55. function removeEventListener(element, eventName, fn) {
  56.   if (element.removeEventListener) {
  57.     element.removeEventListener(eventName, fn);
  58.   } else if (element.detachEvent) {
  59.     element.detachEvent('on' + eventName, fn);
  60.   } else {
  61.     element['on' + eventName] = null;
  62.   }
  63. }
  64.  
  65. // 获取页面滚动距离的浏览器兼容性问题
  66. // 获取页面滚动出去的距离
  67. function getScroll() {
  68.   var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
  69.   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  70.   return {
  71.     scrollLeft: scrollLeft,
  72.     scrollTop: scrollTop
  73.   }
  74. }
  75.  
  76. // 获取鼠标在页面的位置，处理浏览器兼容性
  77. function getPage(e) {
  78.   var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
  79.   var pageY = e.pageY || e.clientY + getScroll().scrollTop;
  80.   return {
  81.     pageX: pageX,
  82.     pageY: pageY
  83.   }
  84. }
  85.  
  86. //格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
  87. function formatDate(date) {
  88.   // 判断参数date是否是日期对象
  89.   // instanceof  instance 实例(对象)   of 的
  90.   // console.log(date instanceof Date);
  91.   if (!(date instanceof Date)) {
  92.     console.error('date不是日期对象')
  93.     return;
  94.   }
  95.  
  96.   var year = date.getFullYear(),
  97.       month = date.getMonth() + 1,
  98.       day = date.getDate(),
  99.       hour = date.getHours(),
  100.       minute = date.getMinutes(),
  101.       second = date.getSeconds();
  102.  
  103.   month = month < 10 ? '0' + month : month;
  104.   day = day < 10 ? '0' + day : day;
  105.   hour = hour < 10 ? '0' + hour : hour;
  106.   minute = minute < 10 ? '0' + minute : minute;
  107.   second = second < 10 ? '0' + second : second;
  108.  
  109.   return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
  110. }
  111.  
  112. // 获取两个日期的时间差
  113. function getInterval(start, end) {
  114.   // 两个日期对象，相差的毫秒数
  115.   var interval = end - start;
  116.   // 求 相差的天数/小时数/分钟数/秒数
  117.   var day, hour, minute, second;
  118.  
  119.   // 两个日期对象，相差的秒数
  120.   // interval = interval / 1000;
  121.   interval /= 1000;
  122.  
  123.   day = Math.round(interval / 60 / 60 / 24);
  124.   hour = Math.round(interval / 60 / 60 % 24);
  125.   minute = Math.round(interval / 60 % 60);
  126.   second = Math.round(interval % 60);
  127.  
  128.   return {
  129.     day: day,
  130.     hour: hour,
  131.     minute: minute,
  132.     second: second
  133.   }
  134. }

bom案例4-模拟滚动条的更多相关文章

  1. JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

    楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...

  2. javascript动画系列第五篇——模拟滚动条

    × 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...

  3. tomcat URL简写案例：模拟站点www.baidu.com的訪问

    tomcat URL简写案例:模拟站点  * 实际URL:http://www.baidu.com:8080/myweb/1.html  * 实际位置:F:\mywebapps\myweb\1.htm ...

  4. WPF案例 (四) 模拟Windows7桌面任务栏

    原文:WPF案例 (四) 模拟Windows7桌面任务栏 这个程序模彷了Windows7的桌面任务栏,当在桌面上双击某个快捷方式时,将打开一个新的子界面,并且在任务栏里创建一个链接到此界面的任务栏图标 ...

  5. WPF案例 (三) 模拟QQ“快速换装"界面

    原文:WPF案例 (三) 模拟QQ"快速换装"界面 这个小程序使用Wpf模拟QQ快速换装页面的动画特效,通过使用组合快捷键Ctrl+Left或Ctrl+Right,可实现Image ...

  6. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  7. js模拟滚动条滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件

    基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...

  9. jQuery实现模拟滚动条效果；

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

随机推荐

  1. The Hessian Penalty: A Weak Prior for Unsupervised Disentanglement

    目录 概 主要内容 标量情况 向量情况 处于实际(计算量)的考量 应用到生成模型中 代码 Pebbles W., Pebbles J., Zhu J., Efros A., Torralba A. T ...

  2. Latex 入门教程

    Latex 入门教程 学习途径:LaTex入门_哔哩哔哩_bilibili 运行环境:texlive2021.texstudio-4.1.2-win-qt6 1. 基本结构 整个 Latex 文件分为 ...

  3. js 简单版发布留言 案例

    <!DOCTYPE html>   <html lang="en">   <head>       <meta charset=" ...

  4. MongoDB 安装及制作成windows服务

    下载:  注:直接使用浏览器下载速度很慢,建议使用其他下载软件下载(比如:迅雷) 官网下载地址: https://fastdl.mongodb.org/win32/mongodb-win32-x86_ ...

  5. python与redis交互（4）

    python可以使用redis模块来跟redis交互 redis模块的使用 安装模块: pip3 install redis 导入模块:import redis 连接方式 严格连接模式:r=redis ...

  6. PowerShell【Do While、Do Until篇】

    1 $num=0 2 while($num -le 10) 3 { 4 $num 5 $num+=1 6 } 1 $num=0 2 do 3 { 4 $num 5 $num+=1 6 } 7 whil ...

  7. Go的日志库go-logging

    配置文件config.yaml log: prefix: '[MY-LOG] ' log-file: true stdout: 'DEBUG' file: 'DEBUG' config/config. ...

  8. javaScript（笔记1）

    一.JavaScript数据类型: 1.分类: 基本数据类型 & 高级引用数据类型 2.基本数据类型: 数字类型(number), 字符串类型(string), 布尔类型(boolean) 3 ...

  9. 一文了解Flink State Backends

    原文链接: 一文了解Flink State Backends 当我们使用Flink进行流式计算时,通常会产生各种形式的中间结果,我们称之为State.有状态产生,就必然涉及到状态的存储,那么Flink ...

  10. [未完] Linux 4.4 USB —— spiflash模拟usb大容量存储设备 调试记录 Gadget Mass Stroage

    linux 4.4 USB Gadget Mass Stroage 硬件平台: licheepi nano衍生 调试记录 驱动信息 │ This driver is a replacement for ...