查看滚动条的滚动距离

1 window.pageXOffset/pageYOffset
X为横向滚动条的距离 Y为纵向滚动条的距离
IE8及IE8以下不兼容
2 document.body/documentElement .scrollLeft/scrollTop
兼容性比较混乱 用时取两个值相加 因为不可能存在两个同时有值
封装兼容性方法 求滚动轮滚动距离getScrollOffset() 

  1.     <script>
  2.         function getScrollOffset() {
  3.             if (window.pageXOffset) {
  4.                 return {
  5.                     x: window.pageXOffset,
  6.                     y: window.pageYOffset
  7.                 }
  8.             }
  9.             return {
  10.                 x : document.documentElement.scrollLeft+document.body.scrollLeft,
  11.                 y : document.documentElement.scrollTop+document.body.scrollTop
  12.             }
  13.         }
  14.     </script>

查看视口的尺寸

1 window.innerWidth/innerHeight （加上 滚动条宽度 / 高度）
IE8及IE8以下不兼容
2 document.documentElement.clientWidth/clientHeight

标准模式下 任意浏览器都兼容（html顶部写 <!DOCTYPE html>）
3 document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器（html顶部不写 <!DOCTYPE html>）
怪异/混杂模式是向后兼容 即启用后就要试图去兼容之前版本的语法
比如IE7启用怪异模式后 其符合的规则就为IE6
封装兼容性方法，返回浏览器视口尺寸getViewportOffset() 

  1.     <script>
  2.         function getViewportOffset() {
  3.            if(window.innerWidth){
  4.                return {
  5.                    w : window.innerWidth,
  6.                    h : window.innerHeight
  7.                }
  8.            }else{
  9.                if(document.compatMode == 'BackCompat'){
  10.                    return {
  11.                        w : document.body.clientWidth,
  12.                        h : document.body.clientHeight
  13.                    }
  14.                }else{
  15.                    return {
  16.                        w : document.documentElement.clientWidth,
  17.                        h : document.documentElement.clientHeight
  18.                    }
  19.                }
  20.            }
  21.         }
  22.     </script>

查看元素的几何尺寸

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

查看元素的尺寸

1 dom.offsetWidth dom.offsetHeight
查看元素的位置
2 dom.offsetLeft dom.offsetTop
对于无定位父级的元素 返回相对文档的坐标
对于有定位父级的元素 返回相对于最近的有定位的父级的坐标
(即无论是 left 还是 margin-left 等都算距离 )
3 dom.offsetParent
返回最近的有定位的父级 如无 返回body
注意 body.offsetParent 返回null

让滚动条滚动

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

  1.     <script>
  2.         var start = document.getElementsByTagName('div')[0];
  3.         var stop = document.getElementsByTagName('div')[1];
  4.         var timer = 0;
  5.         var key = true;
  6.         start.onclick = function () {
  7.             if (key) {
  8.                 timer = setInterval(function () {
  9.                     window.scrollBy(0, 10);
  10.                 }, 100);
  11.                 key = false;
  12.             }
  13.         }
  14.         stop.onclick = function () {
  15.             clearInterval(timer);
  16.             key = true;
  17.         }
  18.     </script>