如何獲取瀏覽器滾動條的位置？中培偉業(yè)《HTML5開發(fā)最佳實踐應(yīng)用》培訓(xùn)專家姚老師就HTML元素坐標(biāo)定位應(yīng)該注意的問題進(jìn)行了詳細(xì)介紹。

文檔坐標(biāo)和視口坐標(biāo)

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

查詢元素的幾何尺寸

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

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

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

滾動元素

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

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

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

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

元素尺寸、位置和溢出

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

所有HTML元素?fù)碛衞ffsetLeftoffsetTop屬性來返回元素的坐標(biāo)。這些值是文檔坐標(biāo)，并直接指定元素的位置。當(dāng)對于已定位元素的后代元素和一些其他元素，這些屬性返回的坐標(biāo)是相對于祖先元素的而非文檔。

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

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

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

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

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

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

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