各种距离属性总结

1.常用方法和兼容写法

1. 网页可见区域高度 document.body.clientHeight
// 注解： 实测chrome58 不支持该属性， 返回值始终是0； document.documentElement.clientHeight返回值正常。 


2. 网页可见区域宽度 document.body.clientWidth(和下面两个方法得到的结果没什么区别啊，还需要再试验查资料)
  > 网页可见区域宽： document .body.offsetWidth   (包括边线的宽);
  > 网页可见区域高： document .body.offsetHeight (包括边线的宽);
3. 滚动条已滚动高度(纵向) document.body.scrollTop = window.scrollY
4. 滚动条已滚动高度(横向) document.body.scrollLeft = window.scrollX ( safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset, **新版浏览器没有这个问题**)

网上提供的获取滚动条滚动高度的兼容方法document.documentElement.scrollTop， 有滚动高度的情况下在chrome | safari 实验后获取的值都是0！！！所以如果要使用到这个方法，下面这个条件判断是必要的：

if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
    top=document.body.scrollTop;
    left=document.body.scrollleft;    
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
    top=document.documentElement.scrollTop;
    left=document.documentElement.scrollLeft;
}

5. 获取整个页面的高度/宽度，上面是获取可视区域的高度，注意区别：document.body.scrollHeight  /  document.body.scrollWidth

6. 屏幕分辨率的高: window.screen.height （可以直接查看屏幕分辨率）
    屏幕分辨率的宽：window.screen.width

2.offsetWidth\ offsetLeft

1. offsetWidth,获取当前对象的宽度，包含width+padding+border， 兄弟offsetHeight

2. offsetLeft, 当前元素到父元素左边的距离，兄弟offsetTop