<!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. CS5268替代AG9321MCQ 替代AG9321方案 TYPEC转HDMI多功能拓展坞

    台湾安格AG9321MCQ是一款TYPEC拓展坞产品方案,他集中了TYPEC 转HDMI  VGA  PD3.0快充  QC3.0数据传输 I2S接口的音频DAC输出以及可以各种读卡器功能. Caps ...

  2. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  3. centos7 安装locate

    使用locate my.cnf命令可以列出所有的my.cnf文件 yum  -y install mlocate 原因是安装完后没有更新库 更新库:updatedb

  4. CentOS6.9部署Redis3.2.9+FastDFS_4.06+Nginx1.5.0

    CentOS6.9部署Redis3.2.9+FastDFS_4.06+Nginx1.5.0 原文链接:https://www.toutiao.com/i6481931577499582990/ 一.上 ...

  5. Windwos上Mysql突然出现系统错误3，找不到系统路口

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6540869188678844935/ 问题出现: 调试系统时,突然发现数据库连接不上了,打开界面工具也发现连接不上 ...

  6. 联盛德 HLK-W806 (十三): 运行FatFs读写FAT和exFat格式的SD卡/TF卡

    目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...

  7. 基于Appium的APP自动化测试基础--美团APP的实例

    转:https://blog.csdn.net/Tigerdong1/article/details/80159156 前段时间用一种流行语言,一个主流工具,一个实用框架,写了一个美团app自动化测试 ...

  8. [学习分享] 在Windows操作系统下如何安装RMySQL包

    最近在做股票的高频交易数据分析,需要用到数据库,而我只对MySQL比较熟悉,于是就安装了MySQL.当我安装好了MySQL后,正兴冲冲地准备安装RMySQL包时,问题来了:RMySQL包不支持wind ...

  9. 《剑指offer》面试题51. 数组中的逆序对

    问题描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 示例 1: 输入: [7,5,6,4] 输出: 5   限制: ...

  10. 《剑指offer》面试题57. 和为s的两个数字

    问题描述 输入一个递增排序的数组和一个数字s,在数组中查找两个数,使得它们的和正好是s.如果有多对数字的和等于s,则输出任意一对即可. 示例 1: 输入:nums = [2,7,11,15], tar ...