js中各种距离详解

1.滚动条滚动的距离 

window.pageXOffset / pageYOffset    （IE9以下不兼容）

document.body.scrollTop / scrollLeft  或   document.documentElement.scrollTop / scrollLeft（注:这两个方法都为IE8以下方法，但互相冲突，IE8以下浏览器或者兼容前者，或者兼容后者，为方便起见，需写一个兼容性的函数）

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

2.可视区窗口的尺寸

window.innerWidth / innerHeight  （IE9以下不兼容）

document.documentElement.clientWidth / clientHeight  （标准模式下任意浏览器兼容）

document.body.clientWidth / clientHeight （怪异模式下浏览器兼容）

以下为兼容性函数

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
                    }
                }

            }
        }

3.查看元素的几何尺寸

dom.offsetWidth / offsetHeight   

4.查看元素的位置

dom.offsetLeft / offsetTop （注：对于无定位父级的元素，返回相对文档的坐标，有定位父级的元素，返回相对父级元素的坐标）

dom.getElementPosition  （注：任意元素相对于文档的坐标）

未完待续 。。。