有些情況下,「元素中內容」的高度會超過「元素本身」的高度, scrolltop指的是「元素中的內容」超出「元素上邊界」的那部分的高度。
通過乙個例項演示來講述scrolltop屬性是什麼
下面的演示中，外層元素的高度值是200px,內層元素的高度值是300px。很明顯，「外層元素中的內容」高過了「外層元素」本身.當向下拖動滾動條時，有部分內容會隱沒在「外層元素的上邊界」之外，scrolltop就等於這部分「不可見的內容」的高度。
演示：（拖動滾動條，可以看到scrolltop值的變化）
這些文字顯示在內層元素中。
scrolltop值是：0
上面演示中可滾動元素的原碼：
這些文字顯示在內層元素中。
解釋：
內層元素的高度值300px > 外層元素的高度值200px,因此「外層元素的內容」(也就是「內層元素」)無法完全顯示，而外層元素把overflow設定為auto，因此外層元素的右側會出現豎直滑動條
初始狀態下，「內層元素的上邊界」和「外層元素的上邊界」重合，沒有任何內容超過「外層元素的上邊界」，此時scrolltop屬性的值為0。
當向下拖動滾動塊時，超過「外層元素的上邊界」的內容會逐漸增多，scrolltop值就等於這些超出部分的高度。
當拖動滾動塊到最底部時，「內層元素的下邊界」和「外層元素的下邊界」重合，此時,超過「外層元素的上邊界」的內容的高度=300px-200px=100px，也就是此時的scrolltop值。
通過js**來讀取，寫入scrolltop的值
注意：scrolltop的使用方式是element.scrolltop，而不是element.style.scrolltop
通過js**來讀取scrolltop的值
上面的演示例項中，其實已經用到了scrolltop的讀取操作。具體來說就是，在拖動滾動條的過程中，會讀取此時的scrolltop的值，並在下方文字中顯示出來。
上面的演示例項的完整原碼：
這些文字顯示在內層元素中。
scrolltop值是：
解釋：
當拖動「外層元素的滾動條」時，會產生onscroll事件。為這個事件註冊乙個名為讀取scrolltop的值並顯示出來的處理函式
在讀取scrolltop的值並顯示出來這個事件處理函式中，通過外層元素_div.scrolltop得到「外層元素」當時的scrolltop的值，並顯示在頁面上。
通過js**來設定scrolltop的值
對上面的演示例子作一些修改。新增功能：通過js語句來設定scrolltop的值
示例：
這些文字顯示在內層元素中。
scrolltop值是：0
把scrolltop設為50把scrolltop設為500
輸入scrolltop的值:確定
上面的演示例項的完整原碼：
這些文字顯示在內層元素中。
scrolltop值是：
把scrolltop設為50
把scrolltop設為500
輸入scrolltop的值:
確定解釋：
形如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
">
當html文件頭部不包含任何「文件型別宣告」時，需要用document.body.scrolltop獲得正確的值，而document.documentelement.scrolltop的值為0
下面定義的get_scrolltop_of_body()函式可以處理這種差異,得到body元素的scrolltop值
function get_scrolltop_of_body()
else
if(typeof document.compatmode != 'undefined' &&
document.compatmode != 'backcompat')
else
if(typeof document.body != 'undefined')
return scrolltop;
}
scrollTop 用法講解
scrolltop 方法設定或返回被選元素的 垂直滾動條位置 note 當滾動條位置位於最頂部時，位置是0 當用於返回位置時 該方法返回 第乙個匹配元素的滾動條的垂直位置。當用於設定位置時 該方法設定 所有匹配元素的滾動條的垂直位置。返回滾動條位置 selector scrolltop 設定滾動條位...
scrollTop 用法說明
下面的演示中，外層元素的高度值是200px,內層元素的高度值是300px。很明顯，外層元素中的內容 高過了 外層元素 本身.當向下拖動滾動條時，有部 分內容會隱沒在 外層元素的上邊界 之外，scrolltop就等於這部分 不可見的內容 的高度。演示 拖動滾動條，可以看到scrolltop值的變化 這...
scrollTop 用法說明
scrolltop屬性是什麼?有些情況下,元素中內容 的高度會超過 元素本身 的高度,下面的演示中，外層元素的高度值是200px,內層元素的高度值是300px。很明顯，外層元素中的內容 高過了 外層元素 本身.當向下拖動滾動條時，有部分內容會隱沒在 外層元素的上邊界 之外，scrolltop就等於這...