<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {margin: 0;padding: 0;}

        .box {

            width: 300px;

            height: 500px;

            border: 1px solid red;

            margin: 100px;

            position: relative;

            overflow: hidden;

            /* 不让文字被选中 */

            -webkit-user-select:none;

            -moz-user-select:none;

            -ms-user-select:none;

            user-select:none;

        }

        .content {

            padding: 5px 18px 5px 5px;

            position: absolute;

            top: 0;

            left: 0;

        }

        .scroll {

            width: 18px;

            height: 100%;

            position: absolute;

            top: 0;

            right: 0;

            background-color: #eee;

        }

        .bar {

            height: 100px;

            width: 100%;

            position: absolute;

            top: 0;

            left: 0;

            background-color: red;

            border-radius:  10px;

            cursor: pointer;

        }

    </style>

</head>

<body>

<div class="box" id="box">

    <div class="content" id="content">

       我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

       我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

        我是文字内容，我是文字内容，我是文字内容，

    </div>

    <div class="scroll" id="scroll">

        <div class="bar" id="bar"></div>

    </div>

</div>

<script src="common.js"></script>

<script>

  var box = my$('box');

  var content = my$('content');

  var scroll = my$('scroll');

  var bar = my$('bar');

  //1 根据内容的大小，计算滚动条的高度

  //  滚动条的高度 / scroll的高度 = box的高度 / 内容的高度

  // offsetHeight     元素的大小 + padding + border

  // clientHeight     元素的大小 + padding

  // scrollHeight     内容的大小 + padding

  // 当内容的高度大于box的高度，再计算 滚动条的高度，否则的话滚动条的高度为0

  var barHeight = 0;

  if (content.scrollHeight > box.clientHeight) {

    barHeight = box.clientHeight / content.scrollHeight * scroll.clientHeight;

  }

  bar.style.height = barHeight + 'px';

  //2 让滚动条能够拖拽

  // 2.1 当鼠标按下的时候，求鼠标在滚动条中的位置

  bar.onmousedown = function (e) {

    e = e || window.event;

    // 鼠标在滚动条中的位置

    var y = getPage(e).pageY - bar.offsetTop - box.offsetTop;

    // 2.2 当鼠标在页面上移动的时候，求滚动条的位置

    document.onmousemove = function (e) {

        //求滚动条的位置

        var barY = getPage(e).pageY - y - box.offsetTop;

        // 控制bar不能移除scroll

        barY = barY < 0 ? 0 : barY;

        barY = barY > scroll.clientHeight - bar.clientHeight ? scroll.clientHeight - bar.clientHeight : barY;

        bar.style.top = barY + 'px';

        //3 当拖拽滚动条的时候，改变内容的位置

        // 内容滚动的距离 / 内容最大能够滚动的距离 = 滚动条滚动的距离 / 滚动条最大能够滚动的距离

        // 内容最大能够滚动的距离

        var contentMax = content.scrollHeight - box.clientHeight;

        // 滚动条最大能够滚动的距离

        var barMax = scroll.clientHeight - bar.clientHeight;

        var contentY = barY / barMax * contentMax;

        content.style.top = -contentY + 'px';

    }

  }

  document.onmouseup = function () {

    // 移除鼠标移动的事件

    document.onmousemove = null;

  }

</script>

</body>

</html>

common中的代码

function my$(id) {

  return document.getElementById(id);

}

// 处理浏览器兼容性

// 获取第一个子元素

function getFirstElementChild(element) {

    var node, nodes = element.childNodes, i = 0;

    while (node = nodes[i++]) {

        if (node.nodeType === 1) {

            return node;

        }

    }

    return null;

}

// 处理浏览器兼容性

// 获取下一个兄弟元素

 function getNextElementSibling(element) {

    var el = element;

    while (el = el.nextSibling) {

      if (el.nodeType === 1) {

          return el;

      }

    }

    return null;

  }

// 处理innerText和textContent的兼容性问题

// 设置标签之间的内容

function setInnerText(element, content) {

  // 判断当前浏览器是否支持 innerText

  if (typeof element.innerText === 'string') {

    element.innerText = content;

  } else {

    element.textContent = content;

  }

}

// 处理注册事件的兼容性问题

// eventName, 不带on，  click  mouseover  mouseout

function addEventListener(element, eventName, fn) {

  // 判断当前浏览器是否支持addEventListener 方法

  if (element.addEventListener) {

    element.addEventListener(eventName, fn);  // 第三个参数 默认是false

  } else if (element.attachEvent) {

    element.attachEvent('on' + eventName, fn);

  } else {

    // 相当于 element.onclick = fn;

    element['on' + eventName] = fn;

  }

}

// 处理移除事件的兼容性处理

function removeEventListener(element, eventName, fn) {

  if (element.removeEventListener) {

    element.removeEventListener(eventName, fn);

  } else if (element.detachEvent) {

    element.detachEvent('on' + eventName, fn);

  } else {

    element['on' + eventName] = null;

  }

}

// 获取页面滚动距离的浏览器兼容性问题

// 获取页面滚动出去的距离

function getScroll() {

  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

  return {

    scrollLeft: scrollLeft,

    scrollTop: scrollTop

  }

}

// 获取鼠标在页面的位置，处理浏览器兼容性

function getPage(e) {

  var pageX = e.pageX || e.clientX + getScroll().scrollLeft;

  var pageY = e.pageY || e.clientY + getScroll().scrollTop;

  return {

    pageX: pageX,

    pageY: pageY

  }

}

//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(date) {

  // 判断参数date是否是日期对象

  // instanceof  instance 实例(对象)   of 的

  // console.log(date instanceof Date);

  if (!(date instanceof Date)) {

    console.error('date不是日期对象')

    return;

  }

  var year = date.getFullYear(),

      month = date.getMonth() + 1,

      day = date.getDate(),

      hour = date.getHours(),

      minute = date.getMinutes(),

      second = date.getSeconds();

  month = month < 10 ? '0' + month : month;

  day = day < 10 ? '0' + day : day;

  hour = hour < 10 ? '0' + hour : hour;

  minute = minute < 10 ? '0' + minute : minute;

  second = second < 10 ? '0' + second : second;

  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;

}

// 获取两个日期的时间差

function getInterval(start, end) {

  // 两个日期对象，相差的毫秒数

  var interval = end - start;

  // 求 相差的天数/小时数/分钟数/秒数

  var day, hour, minute, second;

  // 两个日期对象，相差的秒数

  // interval = interval / 1000;

  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);

  hour = Math.round(interval / 60 / 60 % 24);

  minute = Math.round(interval / 60 % 60);

  second = Math.round(interval % 60);

  return {

    day: day,

    hour: hour,

    minute: minute,

    second: second

  }

}

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. [数学]高数部分-Part VI 重积分

    Part VI 重积分 回到总目录 Part VI 重积分 二重积分的普通对称性 二重积分的轮换对称性(直角坐标系下) 二重积分直角坐标系下的积分方法 二重积分极坐标系下的积分方法 二重积分中值定理 ...

  2. Error: Cannot find module '@dcloudio/uni-cli-i18n' 解决方案

    这个错误是因为node_modules缺少了   '@dcloudio/uni-cli-i18n' 以下是错误信息  解决方案: yarn add -D @dcloudio/uni-cli-i18n ...

  3. Ranger架构剖析

    Ranger介绍 2016年,Hadoop迎来了自己十周岁生日.过去的十年,Hadoop雄霸武林盟主之位,号令天下,引领大数据技术生态不断发展壮大,一时间百家争鸣,百花齐放.然而,兄弟多了不好管,为了 ...

  4. 【】Hadoop生态圈介绍

    Technorati 标记: hadoop,生态圈,ecosystem,yarn,spark,入门 1. hadoop 生态概况 Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用 ...

  5. CF149D游戏

    题目描述 Petya遇到了一个关于括号序列的问题: 给定一个字符串S,它代表着正确的括号序列,即("(")与 (")")是匹配的.例如:"(())() ...

  6. js 多层 元素叠起来避免误触的解决方法

    添加一层 元素,将点击事件设为 onClick="event.cancelBubble = true" 这样就能将两个可触发事件的元素给隔开

  7. Powershell 【控制台常用方法】

    1 function Pause(){ 2 [System.Console]::Write('按任意键继续...') 3 [void][System.Console]::ReadKey(1) 4 } ...

  8. android入门--环境搭建

    运行环境 windows 7 下载地址 环境下载 最近开接触Android(安卓)嵌入式开发,首要问题是搭建Andoid开发环境,由于本人用的是windows7的笔记本,也就只能到Windows中搭建 ...

  9. HDOJ1573X问题

    https://acm.hdu.edu.cn/showproblem.php?pid=1573 n组线性同余方程求解,最后求出多少解.而最终的解的周期为最小公倍数,范围内的,需要这样算.如果最小超过, ...

  10. Boost下载安装

    下载解压 官方地址 wget https://dl.bintray.com/boostorg/release/1.72.0/source/boost_1_72_0.tar.gz tar -zxvf b ...