如何獲取瀏覽器滾動條的位置？中培偉業《HTML5開發最佳實踐應用》培訓專家姚老師就HTML元素坐標定位應該注意的問題進行了詳細介紹。

文檔坐標和視口坐標

視口坐標是相對于窗口的坐標，而文檔坐標是相對于整個文檔而言。如何獲取瀏覽器滾動條的位置?Window對象的pageXOffsetpageYOffset屬性在所有瀏覽器中提供這些值，除IE8以及更早的版本。IE和所有現代瀏覽器也可以通過scrollLeftscrollTop屬性獲取滾動條位置。

查詢元素的幾何尺寸

判定一個元素的尺寸和位置最簡單的方法是調用它的getBoundingClientRect()方法。該方法是在IE5中引入的，而現在當前的所有瀏覽器都實現了。它不需要參數，返回leftrighttopbottom屬性的對象。

這個方法返回元素在視口坐標中的位置。為了轉換為甚至用戶滾動瀏覽器窗口以后任然有效的文檔坐標

在很多瀏覽器中，getBoundingClientRect()返回的對象還包括widthheight屬性。但在原始的IE中未實現。

滾動元素

之前的getScrollOffsets方法可以查詢滾動條的位置。該例子的scrollLeftscrollTop屬性可以用來設置讓瀏覽器滾動，但有一種更簡單的方法從Javascript最早時期開始支持的。Window對象的scrollTop()方法接口一個點的坐標文檔坐標，并作為滾動條的偏移量設置它們。

WindowscrollBy方法和scroll()scrollTo()類似，但是它的參數是相對的，并在當前滾動條的偏移量上增加。

如果想讓某個元素在文檔中可見，可以利用getBoundingClientRect()計算元素的位置，并轉換為文檔坐標，然后使用scrollTo()方法達到目的。但在需要顯示Html元素上調用scrollIntoView()方法更方便。

scrollIntoView()的行為與設置window.location.hash為一個命名錨點的名字后瀏覽器產生的行為類似。

元素尺寸、位置和溢出

任何HTML元素的只讀屬性offsetWidthoffsetHeightCSS像素返回它的屏幕尺寸。返回的尺寸包含元素的邊框和內邊距，除去了外邊距。

所有HTML元素擁有offsetLeftoffsetTop屬性來返回元素的坐標。這些值是文檔坐標，并直接指定元素的位置。當對于已定位元素的后代元素和一些其他元素，這些屬性返回的坐標是相對于祖先元素的而非文檔。

offsetParent屬性指定這些屬性所相對的父元素。如果offsetParentnull，這些屬性都是文檔坐標，因此，一般來說，用offsetLeftoffsetTop來計算元素的位置需要一個循環：

getElementPosition函數也不總是計算正確的值，下面看如何修復它。除了這些名字以offset開頭的屬性以外，所有的文檔元素定義了其他兩組屬性，名字一組以client開頭，另一組以scroll開頭。

為了理解clientscroll屬性，你需要知道元素的實際內容可能比分配用來容納的盒子更大，因此單個元素可能有滾動條。內容區域是視口，就像瀏覽器窗口，當實際內容比視口大，需要把元素滾動套位置考慮進去。

clientWidthclientHeight類似offsetWidthoffsetHeight，區別在于它們不包含邊框大小。只包含內容和內邊距。同時，如果瀏覽器在內邊距和邊框之間添加了滾動條，clientWidthclientHeight不包含滾動條尺寸。在文檔的根元素上查詢這些屬性時，它們的返回值和窗口的innerWidthinnerHeight屬性值相等。

clientLeftclientTop屬性沒什么用：它們返回元素的內邊距的外邊框和它的邊框的外邊緣之間的水平距離和垂直距離。

scrollWidthscrollHeight是元素的內容區域加上它的內邊距再加上任何溢出內容的尺寸。當內容正好和內容區域匹配沒溢出時，這些屬性與clientWidthclientHeight相等。有溢出時，包含了溢出的內容尺寸。

scollLeftscrollTop指定元素滾動條的位置。在getScrollOffsets()方法中查詢過它們。注意，scrollLeftscrollTop是可寫的，通過設置它們來讓元素中的內容滾動(HTML元素并沒有類似Window對象的scrollTo()方法。