TOC
我们都用过不少JS中的定位属性，比如scrollTop,clientX等等，但是其实单纯从命名上，我们是很难区分各种属性的含义的，我平时也经常回去通过查询文档来了解差别。这里对这些类似属性进行一个汇总区分。
screenY/screenTop & screenX/screenLeft
这一点在浏览器端实现会有一些差异，有些浏览器实现了screenY/screenX，有些实现了screenLeft/screenTop,Chrome两者都实现了，所以使用了的时候不要忘了进行一些兼容性处理哦。
该属性表示浏览器窗口相对于屏幕左边和上边的位置。
下面是一个简单的实例，蓝色盒子代表浏览器，而黑色盒子代表整个屏幕，在Macos下，Y的距离是包含上部的任务栏的，所以该属性是距离到屏幕边缘的距离。
但要注意，这个属性有较大的浏览器差异，在IE下这个值会包含浏览器工具栏的高度，一定要谨慎使用。
偏移量
偏移量包含元素在屏幕上所有*可见*的空间。
偏移量共有四个属性
offsetHeight 元素在垂直方向上占用的空间大小，包括元素的高度，水平滚动条 上下边框的高度。
offsetWidth 元素在水平方向上占用的空间大小，包括元素的宽度，垂直滚动条，左右边框跨度
offsetTop 元素的上外边框至包含元素的上内边框之间的距离
offsetLeft 元素的左外边框至包含元素的左内边框之间的距离
客户区
客户区是指元素内容极其内边距所占据的空间大小。
与偏移量最大的区别是，他不包含边框与滚动条
clientHeight
clientWidth
滚动大小
滚动大小是指包含内容滚动的元素的大小
要注意的是滚动大小是包含边框在内的,但是不包含滚动条的宽度
scrollHeight 在没有滚动条的情况下 元素的总高度
scrollWidth 同样没有滚动条 元素的总宽度
scrollTop 被隐藏在顶部的像素数，修改可以让页面滚动
scrollLeft 被隐藏在左边的像素数，修改同样可以横向滚动
小心使用
偏移量，客户区，滚动大小读取属性都会导致浏览器进行重新计算，所以如果要多次访问务必缓存值，避免不必要的性能损耗。