JavaScript中的座標

標籤：int   即時   設定   其他   基本概念   lse   幾何   標準模式   預設   

基本概念

視口座標：相對於瀏覽器左上方或相對於架構頁<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中的座標