共计 3781 个字符，预计需要花费 10 分钟才能阅读完成。
鼠标：
1.e.clientX 和 e.clientY：获取的鼠标在浏览器可视区域绝对左上角的间隔；
2.e.pageX 和 e.pageY：获取的是鼠标在以后页面的间隔（绝对于 document）
兼容性解决形式:getPage(e).pageX 和 getPage(e).pageY
3.scrollLeft 和 scrollTop：获取页面的滚动间隔
偏移量
offsetParent 用于获取定位的父级元素
几个高度的区别：
- offsetHeight、offsetWidth：元素的大小 +padding+border
offsetTop 和 offsetLeft 获取的盒子的坐标 - clientHeight、clientWidth：元素的大小 +padding
clientLeft 和 clientTop：获取的是 border 的宽高，不是坐标 - scrollHeight、scrollWidth：内容的大小 (包含暗藏掉的局部)+padding
图示：
留神:
scrollWidth 不包含滚动条的宽度
scrollTop 和 scrollLeft 是滚动进来的间隔
Tip: 把滚动条显示进去的办法：在盒子 CSS 款式增加：overflow:auto;(零碎自带的，不过倡议本人写滚动条：代码在上面)
案例
制作模仿滚动条
效果图：
<!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.js 代码：
function my$(id) {return document.getElementById(id);
}
// 获取页面滚动间隔的浏览器兼容性问题
// 获取页面滚动进来的间隔
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
}
}
正文完
发表至： javascript
2020-08-18
