bom案例4-模拟滚动条

<!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-模拟滚动条的更多相关文章

JS-特效～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
javascript动画系列第五篇——模拟滚动条
× 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动前面的话当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...
tomcat URL简写案例：模拟站点www.baidu.com的訪问
tomcat URL简写案例:模拟站点 * 实际URL:http://www.baidu.com:8080/myweb/1.html * 实际位置:F:\mywebapps\myweb\1.htm ...
WPF案例 (四) 模拟Windows7桌面任务栏
原文:WPF案例 (四) 模拟Windows7桌面任务栏这个程序模彷了Windows7的桌面任务栏,当在桌面上双击某个快捷方式时,将打开一个新的子界面,并且在任务栏里创建一个链接到此界面的任务栏图标 ...
WPF案例 (三) 模拟QQ“快速换装"界面
原文:WPF案例 (三) 模拟QQ"快速换装"界面这个小程序使用Wpf模拟QQ快速换装页面的动画特效,通过使用组合快捷键Ctrl+Left或Ctrl+Right,可实现Image ...
JS模拟滚动条(有demo和源码下载,支持拖动滚轮点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
js模拟滚动条滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
jQuery实现模拟滚动条效果；
滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

随机推荐

论文翻译：2020_ACOUSTIC ECHO CANCELLATION WITH THE DUAL-SIGNAL TRANSFORMATION LSTM NETWORK
论文地址:https://ieeexplore.ieee.org/abstract/document/9413510 基于双信号变换LSTM网络的回声消除摘要本文将双信号变换LSTM网络(DTLN ...
Spring企业级程序设计 • 【目录】
章节内容实践练习 Spring企业级程序设计目录(作业笔记) 第1章 Spring企业级程序设计 • [第1章 Spring之旅] 第2章 Spring企业级程序设计 • [第2章 Spring ...
Java EE数据持久化框架mybatis练习——获取id值为1的角色信息。
实现要求: 获取id值为1的角色信息. 实现思路: 创建角色表sys_role所对应的实体类sysRole. package entity; public class SysRole { privat ...
Linux查找class类所在jar包
1.说明写代码或者定位问题的时候, 经常发生只知道类名不知道其所在jar包的问题, 在Eclipse中可以使用Ctrl+Shift+T查找类, 但是如果类所在的jar包不在Build Path中, ...
Zookeeper单机安装(开启kerberos)
安装规划 zookeeper安装到zdh41上面,单机模式 10.43.159.41 zdh41 ZDH.COM 安装用户 zookeeper/zdh1234 useradd -g hadoop -s ...
探索 dotnet core 为何在 Windows7 系统需要补丁的原因
在一些 Windows 7 系统上,根据 dotnet 官方文档,需要安装上 KB2533623 补丁,才能运行 dotnet core 或 .NET 5 等应用.尽管非所有的设备都需要安装此,但这也 ...
html基础表单标签 input系列以及优化方法
场景:在网页中显示手机用户信息的表单效果. 如:登录页.注册页标签名:input 用法是通过改变type属性值,来展示不同效果 1.1 html 代码 <!--placeholder 提示符又叫 ...
Python实训day07pm【Selenium操作网页、爬取数据-下载歌曲】
练习1-爬取歌曲列表任务:通过两个案例,练习使用Selenium操作网页.爬取数据.使用无头模式,爬取网易云的内容. ''' 任务:通过两个案例,练习使用Selenium操作网页.爬取数据. 使用无 ...
《剑指offer》面试题17. 打印从1到最大的n位数
问题描述输入数字 n,按顺序打印出从 1 到最大的 n 位十进制数.比如输入 3,则打印出 1.2.3 一直到最大的 3 位数 999. 示例 1: 输入: n = 1 输出: [1,2,3,4,5 ...
Solon Web 开发，七、视图模板与Mvc注解
Solon Web 开发一.开始二.开发知识准备三.打包与运行四.请求上下文五.数据访问.事务与缓存应用六.过滤器.处理.拦截器七.视图模板与Mvc注解八.校验.及定制与扩展九.跨域 ...

bom案例4-模拟滚动条

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

随机推荐

热门专题