获取窗口属性、元素几何尺寸、滚动条滚动距离

1、查看滚动条的滚动距离

　　（1）

　　　　IE9以下不兼容

　　　　window.pageXOffset：查看滚动条水平方向滚动的距离

　　　　window.pageYOffset：查看滚动条垂直方向滚动的距离

　　（2）

　　　　document.body/documentElement.scrollLeft/scrollTop

　　　　兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值

　　　　var  scrollLeft  =  document.documentElement.scrollLeft  +  document.body.scrollLeft

　　　　var  scrollTop=  document.documentElement.scrollTop  +  document.body.scrollTop

2、查看视口的尺寸

　　（1）window.innerWidth、window.innerHeight

　　　　IE9以下不兼容

　　（2）document.documentElement.clientWidth、document.documentElement.clientHeight

　　　　标准模式下，任意浏览器都兼容

　　（3）document.body.clientWidth、document.body.clientHeight

　　　　适用于怪异模式下的浏览器

3、查看元素的几何尺寸

　　（1）el.getBoundingClientRect( )

　　　　兼容性好、返回的结果不是实时的

　　　　该方法返回一个对象，对象里面有left、top、right、bottom、width、height属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角X和Y坐标

　　（2）el.offsetWidth、el.offsetHeight

　　　　获取标签的宽高，包含width + padding 

　　（3）el.offsetLeft、el.offsetRight

　　　　获取自身到离自己最近、带有定位的父级元素的距离，父级没有定位，相对于body标签的距离

　　（4）el.offsetParent

　　　　获取带有定位的父级，没有就返回body标签

4、让滚动条滚动

　　（1）window.scroll(x, y)

　　　　水平滚动条滚动到距离左侧x距离

　　　　垂直滚动条滚动到距离顶部y距离

　　（2）window.scrollTop(x, y)

　　　　window.scrollTop(x, y) 和 window.scroll(x, y)没有任何区别

 

　　　　水平滚动条滚动到距离左侧x距离

 

　　　　垂直滚动条滚动到距离顶部y距离

 

　　（3）window.scrollBy(x, y)

　　　　水平滚动条滚动到原来滚动的距离加上x距离

　　　　垂直滚动条滚动到原来滚动的距离加上y距离