scrollTop 用法說明

2021-08-08 10:12:17 字數 2341 閱讀 2625

下面的演示中,外層元素的高度值是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屬性是什麼?有些情況下,元素中內容 的高度會超過 元素本身 的高度,下面的演示中,外層元素的高度值是200px,內層元素的高度值是300px。很明顯,外層元素中的內容 高過了 外層元素 本身.當向下拖動滾動條時,有部分內容會隱沒在 外層元素的上邊界 之外,scrolltop就等於這...

scrollTop 用法說明

scrolltop屬性是什麼?有些情況下,元素中內容 的高度會超過 元素本身 的高度,下面的演示中,外層元素的高度值是200px,內層元素的高度值是300px。很明顯,外層元素中的內容 高過了 外層元素 本身.當向下拖動滾動條時,有部分內容會隱沒在 外層元素的上邊界 之外,scrolltop就等於這...

scrollTop是什麼及用法說明

有些情況下,元素中內容 的高度會超過 元素本身 的高度,scrolltop指的是 元素中的內容 超出 元素上邊界 的那部分的高度。通過乙個例項演示來講述scrolltop屬性是什麼 下面的演示中,外層元素的高度值是200px,內層元素的高度值是300px。很明顯,外層元素中的內容 高過了 外層元素 ...