<!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. 贪心学院计算机视觉CV训练营

    贪心学院计算机视觉CV训练营 任务 Notes 其他 任务1:机器学习.深度学习简介 Note1 任务2:深度学习的发展历史 Note2 任务3:现代深度学习的典型例子 Note3 任务4:深度学习在 ...

  2. [opencv]调用鼠标事件执行grabcut算法实现阈值分割

    #include<iostream> #include <opencv2/opencv.hpp> #include <math.h> using namespace ...

  3. Java中两个或多个byte数组合并及int类型转数组

    Java中两个或多个byte数组合并及int类型转数组 // 用list好处是可以未知多个? public static byte[] test(List<byte[]> values) ...

  4. Ubuntu18.04编译Fuchsia

    编译环境 系统:Ubuntu 18.04.1 LTS 64-bit 内存:8 GiB CPU:Intel Core i5-4200M CPU @ 2.50GHz × 4 1.安装编译环境 sudo a ...

  5. 利用 Maven 创建 Docker 镜像并且推送到私有注册中心

    利用 Maven 命令生成项目框架 mvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -Darchetype ...

  6. Swagger的应用

    一.介绍 一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 框架. 二.依赖 <dependency> <groupId>io.springf ...

  7. Mybatis实现分包定义数据库

    Mybatis实现分包定义数据库 背景 业务需求中需要连接两个数据库处理数据,需要用动态数据源.通过了解mybatis的框架,计划 使用分包的方式进行数据源的区分. 原理 前提: 我们使用mybati ...

  8. 【Java】方法

    文章目录 何谓方法 方法的定义 方法调用 方法重载 命令行传参 可变参数 递归 何谓方法 System.out.println(),是什么 Java方法是语句的集合,它们在一起执行一个功能 方法是解决 ...

  9. Android官方文档翻译 七 2.Adding the Action Bar

    Adding the Action Bar 增加一个Action Bar(工具栏) The action bar is one of the most important design element ...

  10. RocketMQ 原理：消息存储、高可用、消息重试、消息幂等性

    目录 消息存储 消息存储方式 非持久化 持久化 消息存储介质 消息存储与读写方式 消息存储结构 刷盘机制 同步刷盘 异步刷盘 小结 高可用 高可用实现 主从复制 负载均衡 消息重试 顺序消息重试 无序 ...