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 ...
随机推荐
- Java Web程序设计笔记 • 【第9章 EL表达式】
全部章节 >>>> 本章目录 9.1 EL 表达式基础 9.1.1 EL 表达式简介 9.1.2 EL 表达式的定义 9.1.3 使用 EL 访问变量 9.1.4 使用 E ...
- Python两处容易理解错误的设计
函数内部修改可变类型的变量时不会视作局部变量(除非函数内有该变量的赋值运算符),因为如果做局部变量处理则修改语句势必报错,此处的理解不会有歧义: s = 'test' d = {True:1,2:'S ...
- C# 执行Javascript脚本
前一阵子使用C#编写SCXML状态机,需要解析EMCScript表达式,使用了Jint库(https://github.com/sebastienros/jint/),当时感觉与C#之间的数据转换不是 ...
- Zookeeper基础教程（六）：.net core使用Zookeeper
Demo代码已提交到gitee,感兴趣的更有可以直接克隆使用,地址:https://gitee.com/shanfeng1000/dotnetcore-demo/tree/master/Zookeep ...
- Fiddler Everywhere简单使用
重装了电脑,想装Fiddler,结果官网下载的包变成了Fiddler Everywhere,体验了下,与老版本相比,操作流程上并无太大变化,但是安装包明显变大了,而且需要登录才能操作,建议还是用老版本 ...
- Git_同一个本地仓库上传到不同的远端仓库（github、gitee）
一.背景 github访问.推拉代码都太慢了,于是想把github上面的项目全部迁移到gitee(码云)上,但又不想放弃在github上维护项目,于是想同时维护两个远端仓库 二.准备工作 1.创建相同 ...
- mysql数据库主从复制教程
mysql主从复制教程 架构规划: 192.168.201.150 master 主节点 192.168.201.154 slave 从节点 1. 修改mysql的配置文件(主节点,从节点都要修改) ...
- 长安“战疫”网络安全卫士守护赛writeup
一. 解题情况 二. 解题过程 题目一 八卦迷宫 用画图工具手工连接,然后将路上的图表和字相对应 按顺序打出,然后根据题目要求换成全拼,加上图片里的前缀cazy{}提交 flag为: cazy{zha ...
- JavaWeb中Cookie会话管理，理解Http无状态处理机制
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6512995108961387015/ 1.<Servlet简单实现开发部署过程> 2.<Serv ...
- day 17 i++优先级大于 *i
(1).有下列定义语句,int *p[4];以下选项中与此语句等价的是[C] (A).int p[4]; (B).int **P; (C).int *(p[4]); (D).int (*p)[4]; ...