鼠标：
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 }}