浏览器确定滚动距离
1 function getScrollOffset() { 2 3 if(window.pageXOffset) { 4 return { 5 x : window.pageXOffset, 6 y : window.pageYOffset 7 } 8 }else{ 9 return { 10 x : document.body.scrollLeft + document.documentElement.scrollLeft, 11 y : document.body.scrollTop + document.documentElement.scrollTop 12 } 13 } 14 }
查看视口的尺寸
window.innerWidth/innerHeight (IE8及IE8以下不兼容)
document.documentElement.clientWidth/clientHeight 标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight 怪异模式下适用
封装兼容性方法，返回浏览器视口尺寸getViewportOffset()
1 function getViewportOffset() { 2 if(window.innerWidth) { 3 return { 4 w : window.innerWidth, 5 h : window.innerHeight 6 } 7 }else{ 8 if(document.compatMode === "BackCompat") { 9 //怪异模式，混杂模式 10 return { 11 w : document.body.clientWidth, 12 h : document.body.clientHeight 13 } 14 }else{ 15 //标准模式 16 return { 17 w : document.documentElement.clientWidth, 18 h : document.documentElement.clientHeight 19 } 20 } 21 } 22 }
标准模式or怪异模式 <!DOCTYPE html> 这段代码的作用，进入标准模式（简单来说） 怪异模式（浏览器的渲染模式不同）（也叫混杂模式）：试图兼容之前的语法（识别过时的语法） 使用document.compatMode属性代表兼容性，这个属性可以判断是否是标准模式。 查看元素的几何尺寸 domEle.getBoundingClientRect(); （求出的是视觉上的尺寸） 兼容性很好 该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标 height和width属性，老版本IE未实现 返回的结果不是“实时的”
查看元素的尺寸 dom.offsetWidth （求出的是视觉上的尺寸） dom.offsetHeight
查看元素的位置 dom.offsetLeft dom.offsetTop 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。 dom.offsetParset 返回最近的有定位的父级，如无，则返回body,body.offsetParset返回null。
让滚动条滚动 window上有3个方法： scroll(), scrollTo(), | scrollBy(); 三个方法功能类似，用法都是将x,y坐标传入，即实现让滚动轮滚动到当前位置。 区别：scrollBy()会在之前的数据基础上做累加。 eg.利用scrollBy()快速阅读的功能