<!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. 基于 Electron 的 Rubick 2.4k star 啦，同步更新新功能！

    为什么要做 Rubick 其实做 Rubick 1.x 的初衷就是解决自己的问题的:特别需要一款支持自定义插件的桌面端应用来简化使用者安装庞大桌面端应用的臃肿.而且涉及到数据安全的问题,插件只能在公司 ...

  2. javaScript系列 [09]-javaScript和JSON (拓展)

    本文输出JSON搜索和JSON转换相关的内容,是对前两篇文章的补充. JSON搜索 在特定的开发场景中,如果服务器端返回的JSON数据异常复杂(可能超过上万行),那么必然就有对JSON文档进行搜索的需 ...

  3. 编写Java程序，使用日期处理类实现日期的格式化输出

    返回本章节 返回作业目录 需求说明: 按"yyyy-MM-dd"格式输入一个字符串型日期,然后输出这个日期为本年中的第几周. 实现思路: 使用SimpleDateFormat格式化 ...

  4. 编写Java程序，随机给定一个数字猜大小

    返回本章节 返回作业目录 需求说明: 由系统随机生成一个1~100之间的整数. 通过控制台一直输入一个整数,比较该数与系统随机生成的那个数,如果大就输出"猜大了.",继续输入:如果 ...

  5. x86-1-32位x86 处理器编程架构

    x86(32位)-1-32位x86 处理器编程架构 Intel 32 位处理器架构简称IA-32(Intel Architecture,32-bit) x86是指intel的86系列的CPU统称,比如 ...

  6. Windows环境下使用Linux命令

    1.说明 如何在Windows环境下使用Linux命令, 这是一个屡见不鲜的问题, 而且已经有很多解决方法, 下面仅推荐几个我觉得好用的工具, 这些工具可能就是我们常用的软件, 而且已经在Window ...

  7. 【java多线程】synchronized和volatile

    文章目录 一.synchronized 1.synchronized使用的方法 2.注意 3.不要以字符串作为锁的对象 4.`synchronized`锁的是什么? 二.volatile 1.引出问题 ...

  8. Git 标签使用详解

    列出标签 # 默认按字母排序显示 $ git tag # 模糊匹配查找标签 $ git tag -l "v1.8.5*" 创建标签 # 创建附注标签 $ git tag -a v1 ...

  9. java list 类型删除其中的某些元素的正确方法

    List<Object> list= new ArrayList<>();//记录需要删除的元素List<Object> li = new ArrayList< ...

  10. VC 2010 Express 学生版(中文版)

    Microsoft Visual C++ 2010 Express 学生版 下载传送门(提取码:r7sm) 如何安装 拿到压缩文件后,解压到桌面(别怕,安装完后这个文件夹是可以删除的). 在 &quo ...