javascript-dom补充

查看滚动条的滚动位置

• window.pageXOffset/pageYOffset：返回滚动像素，IE8及IE8以下不兼容
• document .body/documentElement . scrollLeft/scrollTop:ie8及以下，兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值，不同版本方法不同
• 封装兼容性方法，求滚动轮滚动离getScrollOffset()
  

查看视口的尺寸

• window.innerWidth/innerHeight：IE8及IE8以下不兼容
• document.documentElement.clientWidth/clientHeight：标准模式下，任意浏览器都兼容
• document.body.clientWidth/clientHeight：适用于怪异模式下的浏览器
• 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

查看元素的几何尺寸

domEle.getBoundingClientRect()：该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标

• 兼容性很好
• height和width属性老版本IE并未实现
• 返回的结果并不是“实时的”

查看元素的尺寸

• dom.offsetWidth，dom.offsetHeight：视觉尺寸，不包含margin
• dom.offsetLeft, dom.offsetTop：查看元素的位置，对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
• dom.offsetParent：返回最近的有定位的父级，如无，返回body, body.offsetParent 返回null
  eg：求元素相对于文档的坐标 getElementPosition

在window上的滚动条滚动

• scroll(x,y),scrollTo(x,y) ：让滚动条到x,y位置
• scrollBy()：让滚动条到当前位置加上x,y的位置
  三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
  区别：scrollBy()会在之前的数据基础之上做累加。
  eg：利用scrollBy() 快