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

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

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

查詢?cè)氐膸缀纬叽?/strong>

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

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

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

滾動(dòng)元素

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

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

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

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

元素尺寸、位置和溢出

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

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

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

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

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

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

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

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

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