JavaScript DOM 8 - 文档坐标和视口坐标

在用浏览器打开一个网页的这个状况下，视口坐标就是指浏览器窗口的坐标，而文档坐标就是咱们网页的坐标。在页面没有滚动的状况下，这两个坐标的原点是重合的，也就是两者的左上角（0， 0）重合，而后这两个坐标系的X轴和Y轴分别朝右和朝下延伸。

网页上的某个元素，同时处于这两个坐标系中，当页面没有任何滚的时候，它在两个坐标系中的坐标是同样的，可是当页面滚动了以后，就会不同了。这两个坐标系的换算要经过滚动条的位置来换算。

滚动条一开始的坐标也是(0, 0)，因此滚动条的坐标也就是滚动条的偏移量，同时也反应了页面上的一个元素在文档坐标系中的坐标和在视口坐标系中的坐标的差值：

文档坐标系坐标 ＝ 视口坐标系坐标 ＋ 滚动条的偏移量

获取滚动条的坐标(偏移量)要考略IE8及以前的版本，同时要考略浏览器是否处在怪异模式下面，总得来讲有三种办法得到滚动条坐标：

1: pageXOffset, pageYOffset -> 全部浏览器及 >= IE9
2: document.documentElement.scrollLeft, document.documentElement.scrollTop -> 全部标准模式下面的浏览器
3: document.body.scrollLeft, document.body.scrollTop -> 全部怪异模式下面的浏览器

因此若是咱们写一个总能获取到滚动条得函数，那就是：

function getScrollOffsets(w){
    var w = w || window;
    if(w.pageXOffset !== null){
        return {x: pageXOffset, y: pageYOffset}
    }
    var d = w.document;
    if(document.compatMode == 'CSS1Compat'){
        return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop}
    }
    return {x: d.body.scrollLeft, y: d.body.scrollTop}
}

document.compatMode能够获取当前浏览器得模式：

BackCompat： quirks mode（怪异模式）
CSS1Compat： none-quirks mode（非怪异模式，也叫作standards或者limited-quirks或者 almost standards）。

获取视口的尺寸和以上规则同样，只是相应的属性是：

window.innerWidth | window.innerHeight
document.documentElement.clientWidth | document.documentElement.clientHeight
document.body.clientWidth | document.body.clientHeight