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