scrollTop是什麼及用法說明

分類： JavaScript 2009-06-01 14:49 5189人閱讀評論(3) 收藏舉報

scrollTop屬性是什麼?

有些情況下,“元素中內容”的高度會超過“元素本身”的高度, scrollTop指的是“元素中的內容”超出“元素上邊界”的那部分的高度。

通過一個實例演示來講述scrollTop屬性是什麼

下面的演示中，外層元素的高度值是200px,內層元素的高度值是300px。很明顯，“外層元素中的內容”高過了“外層元素”本身.當向下拖動滾動條時，有部分內容會隱沒在“外層元素的上邊界”之外，scrollTop就等於這部分“不可見的內容”的高度。

演示：（拖動滾動條，可以看到scrollTop值的變化）

這些文字顯示在內層元素中。

scrollTop值是：0

上面演示中可滾動元素的原碼：

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外層元素">
 <div style="width:100px;height:300px;background-color:#FFFF00;" id="內層元素"> 
  這些文字顯示在內層元素中。
 </div>
</div>

解釋：

內層元素的高度值300px > 外層元素的高度值200px,因此“外層元素的內容”(也就是“內層元素”)無法完全顯示，而外層元素把overflow設置爲auto，因此外層元素的右側會出現豎直滑動條
初始狀態下，“內層元素的上邊界”和“外層元素的上邊界”重合，沒有任何內容超過“外層元素的上邊界”，此時scrollTop屬性的值爲0。
當向下拖動滾動塊時，超過“外層元素的上邊界”的內容會逐漸增多，scrollTop值就等於這些超出部分的高度。
當拖動滾動塊到最底部時，“內層元素的下邊界”和“外層元素的下邊界”重合，此時,超過“外層元素的上邊界”的內容的高度=300px-200px=100px，也就是此時的scrollTop值。

通過js代碼來讀取，寫入scrollTop的值

注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop

通過js代碼來讀取scrollTop的值

上面的演示實例中，其實已經用到了scrollTop的讀取操作。具體來說就是，在拖動滾動條的過程中，會讀取此時的scrollTop的值，並在下方文字中顯示出來。

上面的演示實例的完整原碼：

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外層元素">
 <div style="width:100px;height:300px;background-color:#FFFF00;" id="內層元素"> 
  這些文字顯示在內層元素中。
 </div>
</div>

<p>scrollTop值是：<span id="顯示外層元素的scrollTop值"></span></p>

<script type="text/javascript">
 var div_外層元素 = document.getElementById("外層元素");
  div_外層元素.οnscrοll=讀取外層元素的scrollTop值並顯示出來;
  //註冊onscroll事件處理函數。當拖動滾動條時，會產生onscroll事件
 
  var span_顯示外層元素的scrollTop值 = document.getElementById("顯示外層元素的scrollTop值");
 
  //onscroll事件的處理函數
  function 讀取外層元素的scrollTop值並顯示出來() 
  {span_顯示外層元素的scrollTop值.innerHTML=div_外層元素.scrollTop;
   //讀取“外層元素”此時的scrollTop的值並顯示出來
  }
 
  讀取外層元素的scrollTop值並顯示出來();
 //頁面加載完成後，執行一次此函數。顯示最初的scrollTop值，此時的值爲0
</script>

解釋：

當拖動“外層元素的滾動條”時，會產生onscroll事件。爲這個事件註冊一個名爲讀取scrollTop的值並顯示出來的處理函數
在讀取scrollTop的值並顯示出來這個事件處理函數中，通過外層元素_div.scrollTop得到“外層元素”當時的scrollTop的值，並顯示在頁面上。

通過js代碼來設置scrollTop的值

對上面的演示例子作一些修改。添加功能：通過js語句來設置scrollTop的值

示例：

這些文字顯示在內層元素中。

scrollTop值是：100

輸入scrollTop的值:

上面的演示實例的完整原碼：

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外層元素A">
 <div style="width:100px;height:300px;background-color:#FFFF00;" id="內層元素A">
  這些文字顯示在內層元素中。
 </div>
</div>

<p>scrollTop值是：<span id="顯示外層元素A的scrollTop值"></span></p>

<p><button type="button" οnclick="div_外層元素A.scrollTop=50;">把scrollTop設爲50</button>
     <button type="button" οnclick="div_外層元素A.scrollTop=500;">把scrollTop設爲500</button>
</p>
 
<p>輸入scrollTop的值:<input type="text" id="輸入scrollTop的值" value="" />
  <button type="button" οnclick="設置scrollTop的值()" name="設置scrollTop的值">確定</button>
</p>

<script type="text/javascript">
 var div_外層元素A = document.getElementById("外層元素A");
 div_外層元素A.οnscrοll=讀取外層元素A的scrollTop值並顯示出來;
 //註冊onscroll事件處理函數。當拖動滾動條時，會產生onscroll事件

 var span_顯示外層元素A的scrollTop值 = document.getElementById("顯示外層元素A的scrollTop值");

 //onscroll事件的處理函數
 function 讀取外層元素A的scrollTop值並顯示出來() 
 {span_顯示外層元素A的scrollTop值.innerHTML=div_外層元素A.scrollTop;
 //讀取“外層元素”此時的scrollTop的值並顯示出來
 }

 讀取外層元素A的scrollTop值並顯示出來();
 //頁面加載完成後，執行一次此函數。顯示最初的scrollTop值，此時的值爲0

 div_外層元素A.scrollTop = 10;
 //通過js語句來設置scrollTop的值,本條語句會觸發onscroll事件，使得"讀取外層元素A的scrollTop值並顯示出來"函數執行一次。

 function 設置scrollTop的值()
{if("" != document.getElementById("輸入scrollTop的值").value)
  div_外層元素A.scrollTop = document.getElementById("輸入scrollTop的值").value;
 else alert("請輸入一個數值");
 }
</script>

解釋：

形如div_外層元素A.scrollTop = 12345;的賦值語句會觸發onscroll事件，使得讀取scrollTop的值並顯示出來函數執行一次
上一個例子中已經提到：當拖動滾動條到最底部時，scrollTop=300px-200px=100px，這是scrollTop能夠取的最大值。當用更大的值賦給scrollTop時，scrollTop會自動把它轉變爲100。例如上面的“把scrollTop設爲500”按鈕，scrollTop會把500轉變爲100。

得到body元素的scrollTop

body元素的scrollTop指的是超出“瀏覽器窗口上邊界”的內容的高度

當html文檔頭部包含有“文檔類型聲明”時，需要用document.documentElement.scrollTop獲得正確的值，而document.body.scrollTop的值爲0

<!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>

當html文檔頭部不包含任何“文檔類型聲明”時，需要用document.body.scrollTop獲得正確的值，而document.documentElement.scrollTop的值爲0

下面定義的get_scrollTop_of_body()函數可以處理這種差異,得到body元素的scrollTop值

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;
}

scrollTop是什麼及用法說明