滚动条距离与高度、兼容模式、可视尺寸

查看滚动条的距离

常规：window.pageXOffset/pageYOffset(IE9某些版本，IE8以下不支持) IE9、IE8及以下： document.body.scrollLeft/document.body.scrollTop

对获取滚动条距离兼容性函数封装

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

浏览器的怪异模式和标准模式

怪异模式： BackCompat 标准模式：CSS1Compat

浏览器窗口的可视区域尺寸（不包括浏览器自己的UI栏）

常规：window.innerWidth/innerHeight

IE9/IE8及以下：

标准模式:document.documentElement.clientWidth/clientHeight

怪异模式：document.body.clientWidth/clientHeight

封装获取浏览器可视窗口尺寸函数

    function getViewportSize() {
      if(window.innerWidth) {
        return {
          width: window.innerWidth,
          height: window.innerHeight
        }
      }else {
        if(document.compatMode === 'BackCompat') {
          return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
          }
        }else {
          return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
          }
        }
      }
    }

outerWidth/outerHeight了解一下就行 getBoundingClientRect()可以获取元素的尺寸及坐标等信息，但是不实时，而且计算width和height是包括了padding值的

元素位置

offsetTop/offsetLeft(计算出来的值与父级是否定位有关,而且包含自己margin,padding，而且跟有没有设置top和left值没半毛钱关系，也就是说自身不一定要设置定位)

offsetParent返回一个有定位的父级元素

//获取元素距离最外层元素html的左边沿和上边沿的距离的函数封装
function getElementDocPosition(el) {
  var parent = el.offsetParent,
      offsetLeft = el.offsetLeft,
      offsetTop = el.offsetTop;
  while(parent) {
    offsetLeft += parent.offsetLeft;
    offsetTop += parent.offsetTop;
    parent = parent.offsetParent;
  }

  return {
    left: offsetLeft,
    top: offsetTop
  }
}

window.scroll/window.scrollTo, window.scrollBy(每次会在原基础上继续滚动距离，可以为负数)