获取窗口属性，获取dom尺寸

一.查看滚动条的滚动距离

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

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

二.查看可视区窗口的尺寸

• window.innerWidth/innerHeight
  IE8及以下不兼容
• document.documentElement.clientWidth/clientHeight
  标准模式下，任意浏览器都兼容
• document.body.clientWidth/clientHeight
  适用于怪异模式（试图兼容之前版本的语法）下的浏览器
• 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()
  ps:document.compatMode判断浏览器模式
  -->CSS1Compat标准模式
  -->BackCompat向后兼容，怪异模式

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

三.查看元素的几何尺寸

1. domEle.getBoundingClientRect();

• 兼容性很好
• 该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
• height和width属性老版本IE并未实现
• 返回的结果并不是“实时的”

2. 查看元素的尺寸（2）
   dom.offsetWidth, dom.offsetHeight
   求的是看起来的宽高（包括padding，不包含margin哦）
   *ps: dom.style.height-->求的是内容宽高

四.查看元素的位置

1. dom.offsetLeft, dom.offsetTop

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

2. dom.offsetParent

• 返回最近的有定位的父级，如无，返回body, body.offsetParent 返回null
• eg:求元素相对于文档的坐标 getElementPosition

五.让滚动条滚动

• window上有三个方法
• scroll(x, y), scrollTo(x, y), scrollBy(x, y);

1. scroll();滚动条滚动到指定位置
   window.scroll(x, y);
   eg：window.scroll(0, 10);
   让滚动条滚动到当前位置，反复执行（0，10），滚动条位置不变。
2. scrollTo();
   与scroll()方法一致
3. scrollBy();累加滚动距离
   eg:window.scrollBy(0, 10);
   反复执行（0，10），向下不断移动10像素

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

转载于:https://www.jianshu.com/p/6b97b1e7c443