scrollTop 用法說明

scrolltop屬性是什麼? 有些情況下,「元素中內容」的高度會超過「元素本身」的高度,

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

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

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

scrolltop值是：

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

解釋：

內層元素的高度值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值是：

把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()方法可以處理這種差異

複製** **如下:

function get_scrolltop_of_body()

else

if(typeof document.compatmode != 'undefined' &&

document.compatmode != 'backcompat')

else

if(typeof document.body != 'undefined')

return scrolltop;

}

scrollTop 用法說明

scrollTop 用法說明

scrollTop 用法說明

scrollTop是什麼及用法說明

相關推薦