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