正文
offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、写在前面
在阅读本文前，希望大家能针对每个属性亲手测试，网上现有的大量相关博客都有不等的概念错误，毕竟亲手实践才能更好的掌握这些概念。
1.pageX，clientX，screenX与offsetX
先统一了解下这四个概念，理解不透没关系，咱们把概念相近的对比着一一细说。
pageX：鼠标指针距离文档左侧边缘的距离，随滚动条变化而变化
clientX：鼠标指针距离可视窗口左侧边缘的距离，不随滚动条变化而变化
screenX：鼠标指针距离屏幕的距离(包括浏览器工具栏之类)，不随滚动条变化而变化
offsetX：鼠标指针距离当前绑定元素左侧距离
我们先来看看pageX与clientX无滚动条的对比效果
<div class="one"></div>
var Div = document.querySelector('.one');
Div.onmousemove = (e) => {
var X1 = e.pageX;
var Y1 = e.pageY;
var X2 = e.clientX;
var Y2 = e.clientY;
Div.innerHTML = `pageX:${X1},pageY:${Y1},clientX:${X2},clientY:${Y2}`
}
由图可见，在无滚动条的情况下，pageX与clientX，pageY与clientY是完全相同的。
试着给div增加一个margin-left:1600px;让页面出现滚动条,我们将可视窗口滚动到最右侧，再来对比pageX与clientX
可以看到，在页面X轴出现滚动条后，pageX始终要比clientX要大，那是因为clientX无论滚动条滚动多少，它始终只计算鼠标到可视窗口左侧的距离，而pageX则还要加上滚动的距离
pageX = 鼠标到可视窗口左侧距离+滚动条滚动距离(如果有滚动条)
clientX = 鼠标到可视窗口左侧距离
如果没有滚动条，这两者的距离是完全相同的。
我们再结合前者，加上screenY与offsetY的对比，请看图
为了方便对比，这里我们拿Y轴做对比。
offsetY是相对绑定事件的元素，这里是相对div，所以相比另外三个，Y轴的数值永远是最小的。
pageY和clientY在无滚动条的情况下是完全相同的，相对文档和可视窗口区域。这里因为没有滚动条，所以是完全相同的。
screen是相对屏幕，包含了浏览器任务栏，书签栏的高度，所以它永远是最高的。
关于这四个的兼容问题，由于浏览的不断更新，比如offsetX很多博客都说是IE独有的，结果上图我全是在谷歌测试的，也是支持的，所以这样的说法过于绝对，是不完全正确的。
2. offsetLeft与style.left
下面概念中的position值为非static时，可以理解为position为relative,absolute,fixed其一
2.1 offsetLeft：
元素相对其定位父级(offsetParent)的左偏移量。
简单去理解，就是距离元素最近且position值非static父级元素的左偏移量，如果向上一直未找到，则相对body。
假设此时一个父级div包含一个子级div，均未定位，父级margin-left为20px,子级margin-left为30px，且父级border为2px
我们上面说了，从子级开始往上找定位父级，但是未找到，那么此时就相对body
那么子级的offsetLeft = 父级左偏移量20px+子级30px+父级边框2px
我们尝试给父级div添加一个position：absolute属性，其余属性全部不做改变，此时子级的定位父级就是自己的上级div，因此offsetLeft为30px
2.2 style.left：
获取元素相对其定位父级的左偏移，且元素本身position值为非static。
简单去理解，style.left只有元素自身进行定位才会有效，否则是无法取到的。
2.3 为什么style.left取不到？
首先元素本身要进行定位，其次，其left属性为内部样式时才能获取。
<div style='left=20px'></div>
2.4 offsetLeft与style.left的区别
1.获取offsetLeft属性的元素自身不用定位，但获取style.left的元素必须定位
2.offsetLeft是只读的，style.left是读写的
3.offsetLeft返回的是数字，不带单位，style.left 返回的是字符串，带单位
4.style.left 只能获取定义在html中的内部样式属性，而offsetLeft并没有这个限制
2.5 同时存在margin-left与left时的offsetLeft
<div class="parent"><div class="child" style='left:20px'></div></div>
需要注意的是，当margin与left，外边距与定位偏移量同时存在时，它们是累加的，并不会发生重叠。
3. offsetHeight,clientHeight与scrollHeight
我们先来看看这三者的含义
offsetHeight：获取元素的宽度，包含border，padding，不包含margin。
clientHeight:获取元素内容区域的宽度，包括padding与元素的width，不包含border与margin，一般用于获取视窗高度，不包括溢出不可见部分的高度。
scrollHeight：只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容，包含padding和width，不包含border与margin
4.clientTop，scrolleTop
scrolleTop:获取元素滚动后的距离文档顶部的距离，也就是滚动条滚动的距离。
clientTop:获取元素边框的厚度，也就是border的宽度。
有个公式：element.scrollHeight - element.scrollTop === element.clientHeight用于判断滚动条是否滚动到底。
