DOM基本操作3

查看滚动条的滚动距离 1.window.pageXOffset/pageYOffset

2.document.body.scrollLeft/scrollTop 3.document.documentElement.scrollLeft/scrollTop IE8及IE8以下不兼容

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

封装兼容性方法，求滚动轮滚动距离getScrollOffset()

function getScrollOffset(){ if(window.pageXOffset){ return{ x : window.pageXOffset, y : window.pageYOffset } }else{ return{ x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop } } }

查看视口的尺寸

1.window.innerWidth/innerHeight IE8及IE8以下不兼容

2.document.documentElement.clientWidth/clientHeight 标准模式下，任意浏览器都兼容

3.document.body.clientWidth/clientHeight 适用于怪异模式下的浏览器：把删除，浏览器就处于怪异模式

封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

function getViewportOffset(){ if(window.innerWidth){ return{ w : window.innerWidth, h : window.innerHeight } }else{ if(document.compatMode === "BackCompat"){ return{ w : document.body.clientWidth, h : document.body.clientheight } }else{ return { w : document.documentElement.clientWidth, h : document.documentElement.clientheight } } } }