javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离

event.screenX                          鼠标/触摸，相对于显示屏的X坐标
event.screenY                          鼠标/触摸，相对于显示屏的Y坐标
event.clientX                          鼠标/触摸，相对于浏览器视口的X坐标
event.clientY                          鼠标/触摸，相对于浏览器视口的Y坐标
event.pageX                            鼠标/触摸，相对于文档的X坐标(ie不支持)
event.pageY                            鼠标/触摸，相对于文档的Y坐标(ie不支持)
event.offsetX                          鼠标/触摸，相对于触发事件的X坐标(ie独有)
event.offsetY                          鼠标/触摸，相对于触发事件的Y坐标(ie独有)

window.pageXOffset                     X轴滚动条，能向右滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
window.pageYOffset                     Y轴滚动条，能向下滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
document.body.scrollLeft               X轴滚动条，能向右滚动的距离（仅移动端支持）
document.body.scrollTop                Y轴滚动条，能向下滚动的距离（仅移动端支持）
document.documentElement.scrollTop     X轴滚动条，能向右滚动的距离（仅PC端支持）
document.documentElement.scrollLeft    Y轴滚动条，能向下滚动的距离（仅PC端支持）
document.scrollingElement.scrollTop    X轴滚动条，能向右滚动的距离（ie不支持）
document.scrollingElement.scrollLeft   Y轴滚动条，能向下滚动的距离（ie不支持）

screen.width                           屏幕宽度
screen.height                          屏幕高度
screen.availWidth                      屏幕可用宽度
screen.availWidth                      屏幕可用高度
window.outerWidth                      游览器宽度
window.outerHeight                     游览器高度
window.innerWidth                      游览器视口宽度
window.innerHeight                     游览器视口高度
document.body.offsetWidth              页面宽度
document.body.offsetHeight             页面高度
document.body.clientWidth              页面可显示宽度
document.body.clientHeight             页面可显示高度

getBoundingClientRect()                返回元素的宽高与坐标集合
                                           > 宽高 = 可视内容区 + 内边距 + 边框
                                           > 坐标
                                                 left = 位移 + 外边距
                                                 right = 位移 + 完整盒子模型所占宽度
                                                 top = 同left
                                                 bottom = 同right
getClientRects()                       返回元素的数个矩形区域的类数组对象（集合）
                                           > 用于块级元素，则集合[n]和getBoundingClientRect返回相同
                                           > 用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员
                                           > 该方法，用于判断行内元素是否换行，以及行内元素的每一行的位置偏移
document.getClientRects(x, y)          返回当前文档上处于指定坐标位置最顶层的元素的最里层元素
                                           > 最顶层，指z-index最大的元素
                                           > 最里层，是指最里层面的子元素
                                           > 该方法，用来检测元素是否发生重叠或是碰撞