基本概念

視口坐標：相對於瀏覽器左上角或相對於框架頁<iframe>元素的坐標，不包括瀏覽器的“外殼”。

文檔坐標：相對於文檔左上角的坐標

除IE8及更早的版本，Window對象的pageXOffset和pageYOffset屬性在所有的瀏覽器中提供滾動條的位置。

IE和其他瀏覽器可以通過scrollLeft和scrollTop屬性來獲得滾動條的位置。標準模式下，通過document.documentElement來獲取這些屬性，怪異模式下，通過document.body來獲取這些屬性

Example:

//獲取滾動條偏移量
function getScrollOffsets(w){
    w=w||window;
　　 var d=w.document;
    if(w.pageXOffset!=null){
        return {
            x:w.pageXOffset,
            y:w.pageYOffset
        };
    }
    if(document.compatMode=="CSS1Compat"){
        return{
            x:d.documentElement.scrollLeft,
            y:d.documentElement.scrollTop
        };
    }
    return {
        x:d.body.scrollLeft,
        y:d.body.scrollTop
    };
}
 

查詢元素的幾何尺寸

getBoundingClientRect方法，返回一個有left.right,top,bottom屬性的對象，left,top表示元素左上角的坐標，right，bottom表示元素右下角的坐標，返回元素在視口坐標的位置，返回的坐標包含元素的邊框和內邊距，不包含外邊距，非實時的，在用戶滾動或改變瀏覽器窗口大小時不會更新它們。

HTML元素的offsetLeft和offsetTop屬性也能返回元素的X和Y坐標（若該元素是已定位的子元素，則它返回相對於父元素的坐標，可通過offsetParent來獲取它的父元素）,offsetWidth和offsetHeight返回它的屏幕尺寸。

Document對象的的elementFromPoint方法返回指定位置的一個元素，傳遞x坐標和y坐標

滾動

Window對象的scrollTop()方法，接受一個點的X和Y坐標，並作為滾動條偏移量來設置他們

scrollby()和scroll()和scrollTo()類似，但是它的參數是相對的

可通過getBoundingClientRect計算元素位置，並轉換為文檔坐標，再調用scrollTo()移動到元素所在的位置。但有更簡單的辦法，scrollIntoView()，默認參數為true,放在視口的上邊緣處，設置為false時，放在視口的下邊緣處

JavaScript中的坐標