1.引言
对常见CSS x,y属性有大概了解，实际运用过程中发现很多概念模糊不清，对其进行学习。
2.常见x,y属性概念
1. e.clientX 是目标点距离浏览器可视范围的X轴坐标
2. e.pageX 是目标点距离document最左上角的X轴坐标，即触发事件点相对于当前浏览器可视窗口左上角的横向距离，加上滚动条的滚动距离
[没有滚动条时pageX=clientX,有滚动条时pageX=clientX+横向滚动条距离scrollLeft/Right]
3. offsetX/Y：当鼠标事件发生时，鼠标相对于事件源x轴的位置
4. screenX：触发事件点相对于当前电脑屏幕左上角的横向距离
5. layerX：相对于position为absolute或relative的父元素胡外边缘的距离。ie8及ie8之前的版本没有layerX或layerY值
6. X：等于clientX
<p style="font-size:12px ;width:70px;color:white;background:#909090;text-align:center">图解如下：</p>
在不同浏览器下，各种属性的定义不同，表现也有细微差异，因此
<span style="font-size:15px ;color:#909090">推荐使用:</span>
screenX/Y、pageX/Y、clientX/Y、offsetX/Y
<span style="font-size:15px ;color:#909090">此外:</span>
X/Y与clientX/Y相同，firefox不支持
layerX/Y除IE外与pageX/Y相同，IE11下与clientX/Y相同，非官方属性。
3.相关scroll、offset属性概念
scrollTop是指某个可滚动区块向下滚动的距离。
offsetTop则是元素的上边框与父元素的上边框的绝对距离。
- offsetTop:
当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部的距离用style.top属性.
（style.top属性必须自己设置，系统默认为空,设置方式：
document.getElementById("box").style.top="100px";） - offsetLeft:
当前对象到其上级层左边的距离.不能对其进行赋值.设置对象到页面左部的距离用style.left属性. - offsetWidth:
当前对象的宽度.与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值 - offsetHeight:
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值 - offsetParent:
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
<details>
<summary><span>offsetParent属性</span></summary>
(1) 当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时]，则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)
(2) 当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素
(3) 当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。
</details> - scrollLeft:
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离． - scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离
<p style="font-size:12px ;width:70px;color:white;background:#909090;text-align:center">图解如下：</p>
<details>
<summary><span id = "list3">相关属性</span></summary>
DOM innerheight、innerwidth属性:
只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。
这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
<p style="font-size:12px ;color:#909090">IE 不支持这些属性。它用 document.documentElement 或 document.body的 clientWidth 和 clientHeight 属性作为替代。</p>
pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。这些属性是只读的。
pageYOffset 属性是 scrollY 属性的别名：window.pageYOffset == window.scrollY;
window.pageYOffset == window.scrollY
所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
但是 IE 8 及 更早 IE 版本不支持该属性,但可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性 。
offsetTop：
获取任意元素，距离页面顶部（不是文档显示区）的距离
innerHeight:文档显示区的高度
scrollTop：页面顶部超出文档显示区的距离
scrollLeft = pageXOffset = scrollX 都代表向左滚动偏移X轴的距离，Y同理为向上滚动偏移距离，兼容不同浏览器而做的处理。
</details>
4.使用场景
例如本周项目中遇到：当scrollTop+innerHeight < offsetTop时,DOM1未在可视窗口显示，
scrollTop+innerHeight > offsetTop时,DOM1已经滚动至可视窗口内，
根据此可以监听元素在可视窗口区内滚动显示范围，从而可以进行“回到顶部”按钮添加判断，以及对当前加载DOM元素进行动态加载效果添加等处理。
