快捷導(dǎo)航

scrollTop 用法說(shuō)明

更新時(shí)間：2009年06月01日 16:14:28 作者：

scrollTop屬性是什么? 有些情況下,“元素中內(nèi)容”的高度會(huì)超過(guò)“元素本身”的高度,

下面的演示中，外層元素的高度值是200px,內(nèi)層元素的高度值是300px。很明顯，“外層元素中的內(nèi)容”高過(guò)了“外層元素”本身.當(dāng)向下拖動(dòng)滾動(dòng)條時(shí)，有部分內(nèi)容會(huì)隱沒(méi)在“外層元素的上邊界”之外，scrollTop就等于這部分“不可見(jiàn)的內(nèi)容”的高度。
演示：（拖動(dòng)滾動(dòng)條，可以看到scrollTop值的變化）
這些文字顯示在內(nèi)層元素中。
scrollTop值是：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

解釋?zhuān)?
內(nèi)層元素的高度值300px > 外層元素的高度值200px,因此“外層元素的內(nèi)容”(也就是“內(nèi)層元素”)無(wú)法完全顯示，而外層元素把overflow設(shè)置為auto，因此外層元素的右側(cè)會(huì)出現(xiàn)一個(gè)上下方向的滑動(dòng)條
初始狀態(tài)下，“內(nèi)層元素的上邊界”和“外層元素的上邊界”重合，沒(méi)有任何內(nèi)容超過(guò)“外層元素的上邊界”，此時(shí)scrollTop屬性的值為0。
當(dāng)向下拖動(dòng)滾動(dòng)條時(shí)，超過(guò)“外層元素的上邊界”的內(nèi)容會(huì)逐漸增多，scrollTop值就等于這些超出的部分。
當(dāng)拖動(dòng)滾動(dòng)條到最底部時(shí)，“內(nèi)層元素的下邊界”和“外層元素的下邊界”重合，超過(guò)“外層元素的上邊界”的內(nèi)容的高度=300px-200px=100px，這也就是此時(shí)的scrollTop值。
通過(guò)js代碼來(lái)讀取，寫(xiě)入scrollTop的值
注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop
通過(guò)js代碼來(lái)讀取scrollTop的值
上面的演示實(shí)例中，其實(shí)已經(jīng)用到了scrollTop的讀取操作。具體來(lái)說(shuō)就是，在拖動(dòng)滾動(dòng)條的過(guò)程中，會(huì)讀取此時(shí)的scrollTop的值，并在下方文字中顯示出來(lái)。
上面的演示實(shí)例的完整原碼：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

解釋?zhuān)?
當(dāng)拖動(dòng)“外層元素的滾動(dòng)條”時(shí)，會(huì)產(chǎn)生onscroll事件。為這個(gè)事件注冊(cè)一個(gè)名為讀取scrollTop的值并顯示出來(lái)的處理函數(shù)
在讀取scrollTop的值并顯示出來(lái)這個(gè)事件處理函數(shù)中，通過(guò)外層元素_div.scrollTop得到“外層元素”當(dāng)時(shí)的scrollTop的值，并顯示在頁(yè)面上。
通過(guò)js代碼來(lái)設(shè)置scrollTop的值
對(duì)上面的演示例子作一些修改。添加功能：通過(guò)js語(yǔ)句來(lái)設(shè)置scrollTop的值
示例：
這些文字顯示在內(nèi)層元素中。
scrollTop值是：
把scrollTop設(shè)為50把scrollTop設(shè)為500
輸入scrollTop的值:確定
上面的演示實(shí)例的完整原碼：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

解釋?zhuān)?
形如div_外層元素A.scrollTop = 12345;的賦值語(yǔ)句會(huì)觸發(fā)onscroll事件，使得讀取scrollTop的值并顯示出來(lái)函數(shù)執(zhí)行一次
上一個(gè)例子中已經(jīng)提到：當(dāng)拖動(dòng)滾動(dòng)條到最底部時(shí)，scrollTop=300px-200px=100px，這是scrollTop能夠取的最大值。當(dāng)用更大的值賦給scrollTop時(shí)，scrollTop會(huì)自動(dòng)把它轉(zhuǎn)變?yōu)?00。例如上面的“把scrollTop設(shè)為500”按鈕，scrollTop會(huì)把500轉(zhuǎn)變?yōu)?00。
得到body元素的scrollTop
body元素的scrollTop是超出“瀏覽器窗口上邊界”的內(nèi)容的高度
當(dāng)html文檔頭部包含有“文檔類(lèi)型聲明”時(shí)，需要用document.documentElement.scrollTop獲得正確的值，而document.body.scrollTop的值為0

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<script type="text/javascript"> 
alert("document.documentElement.scrollTop:"+document.documentElement.scrollTop //"正確的值" 
+"document.body.scrollTop:"+document.body.scrollTop //"值為0" 
); 
</script> 

當(dāng)html文檔頭部不包含任何“文檔類(lèi)型聲明”時(shí)，需要用document.body.scrollTop獲得正確的值，而document.documentElement.scrollTop的值為0
下面定義的get_scrollTop_of_body()方法可以處理這種差異

復(fù)制代碼代碼如下:

function get_scrollTop_of_body(){ 
var scrollTop; 
if(typeof window.pageYOffset != 'undefined'){ 
scrollTop = window.pageYOffset; 
} 
else 
if(typeof document.compatMode != 'undefined' && 
document.compatMode != 'BackCompat'){ 
scrollTop = document.documentElement.scrollTop; 
} 
else 
if(typeof document.body != 'undefined'){ 
scrollTop = document.body.scrollTop; 
} 
return scrollTop; 
}