scrollTop 用法說明

2024-05-06 14:15:14

字體：大中小

供稿：網(wǎng)友

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

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

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]
解釋：
當拖動“外層元素的滾動條”時，會產(chǎn)生onscroll事件。為這個事件注冊一個名為讀取scrollTop的值并顯示出來的處理函數(shù)
在讀取scrollTop的值并顯示出來這個事件處理函數(shù)中，通過外層元素_div.scrollTop得到“外層元素”當時的scrollTop的值，并顯示在頁面上。
通過js代碼來設(shè)置scrollTop的值
對上面的演示例子作一些修改。添加功能：通過js語句來設(shè)置scrollTop的值
示例：
這些文字顯示在內(nèi)層元素中。

上一篇：JS 文字符串轉(zhuǎn)換unicode編碼函數(shù)

下一篇：Javascript 日期對象Date擴展方法