查看滚动条滚动的距离

window.pageXOffset / window.pageYOffset

（IE8及IE8以下不兼容）

document.body.scrollLeft / document.body.scrollTop

documentElement.srcollLeft / documentElement.scrollTop

（兼容性比较混乱，用时取两个值相加，因为不可能同时存在两个值，一个存在时，另一个一定为0）

//封装出求滚动条的滚动距离的方法
/**
 * [getScrollOffset 求浏览器滚动条滚动的长度]   
 * @return {[obj]} [description]  x ： 横轴  y  : 纵轴  ,返回值为对象，对象内部数据值为number类型
 */
function getScrollOffset (){
    if(window.pageXOffset){
        return {
            x : window.pageXOffset,
            y : window.pageYOffset
        }
    }else{//兼容IE8及IE8以下的浏览器版本
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

---

查看视口的尺寸

window.innerWidth / window.innerHeight

（IE8及IE8以下不兼容）

document.documentElement.clientWidth / document.documentElement.clientHeight

（标准模式下，兼容所有的浏览器）

document.body.clientWidth / document.body.clientHeight

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

//封装一个获取浏览器窗口尺寸的方法
/**
 * [getViewportOffset 求浏览器窗口可视区域的尺寸]  
 * @return {[obj]} [description]  x ： 宽度  y  : 高度  ,返回值为对象，对象内部数据值为number类型
 */
function getViewportOffset (){
    if(window.innerWidth){
        return {
            w : window.innerWidth,
            h : window.innerHeight
        }
    }else{
        //兼容IE8及IE8以下的版本
        if(document.compatMode === 'BackCompat'){
            //兼容怪异模式/混杂模式
            return {
                w : document.body.clientWidth,
                h : document.body.clientHeight
            }
        }else{
            //兼容标准模式/非怪异模式
            return {
                w : document.documentElement.clientWidth,
                h : document.documentElement.clientHeight
            }
        }
    }
}

---

domEle.getBoundingClientRect()方法可以求任意元素的位置及大小信息

1.兼容性好

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

3.height和width属性在老版本的IE并未实现

4.返回结果不是实时的，如果后面改变的话，在改变之前获取到的值不会改变（但是此方法不常用）

---

查看元素的尺寸

dom.offsetWidth / dom.offsetHeight
（查看元素的宽和高，包含border和padding但是不包含margin）

---

查看元素的位置

domEle.offsetLeft / domEle.offsetTop

对于无定位的父级元素，返回相对文档的坐标，对于有定位父级的元素，返回相对于最近的有定位的父级元素的坐标。

domEle.offsetParent

返回最近的有定位的父级，如果没有，返回body，求body.offsetParent返回null

---

让滚动条滚动

window上面有三个方法

scroll(),scrollTo() :两个方法一样,都是让滚动条滚动到哪。用法 window.scrollTo(x,y),参数x表示横轴滚动距离，y表示纵轴滚动距离。非累加。

scrollBy() 让滚动条滚动多少距离，是在之前数据的基础上累加的。 window.scrollBy(x,y)，再滚动横轴加x，纵轴加y