scrollTop、scrollLeft、scrollWidth、scrollHeight

作者:chilleen 來源:千一網絡(原創) 日期:2006-12-24

scrollTop、scrollLeft、scrollWidth、scrollHeight

上面是一個網頁,由于窗口大限的限制,沒有完全顯示出來,沒有顯示出來的,用陰影標注了。

  • 上陰影就是 scrollTop;
  • 上陰影 + 白的 + 下陰影就是 scrollHeight。

scrollTop 是“卷”起來的高度值,示例:

<div style="width:200px;height:200px;background-color:#999999;overflow:hidden;" id="p">
  <div style="width:100px;height:300px;background-color:#FFFF00;" id="t">如果為 p 設置了 scrollTop,這些內容可能不會完全顯示。</div>
</div>
<script type="text/javascript">
<!--
var p = document.getElementById("p");
p.scrollTop = 10;
//-->
</script>

scrollTop、scrollLeft

由于為外層元素 p(注意是 p,不是 t)設置了 scrollTop,所以內層元素會向上“卷”,這卷起來的部分就是 scrollTop

scrollLeft 也是類似道理。

scrollWidth、scrollHeight

我們已經知道 offsetHeight自身元素的高度,而 scrollHeight內層元素的實際高度 + 外層元素 padding,包含內層元素的隱藏的部分。

上述中 p(注意是 p,不是 t)的 offsetHeight 為 200,而其 scrollHeight 為 300。如果 p 具有 padding,那么應該把 padding 算到 scrollHeight 中,但其 border、margin 不應計算在內。

scrollHeight 也是類似道理。

IE 和 FireFox 全面支持,而 Netscape 8(很老了) 和 Opera 7.6(很老了) 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。

相關閱讀

你前面那位網友看了:微信小程序進階開發-picker 實現選擇框、時間選擇、日期選擇、性別選擇……

▲▲▲嘿,歡迎轉載傳播本站原創文章,盡量保留來源噢。▲▲▲

文章評論
  • 1 樓:評論
    scrollHeight ff 明顯不支持的
  • 2 樓:評論
    offsetHeight怎么會是100呢?你不是說offsetHeight是自身元素的高度,那應該是200才對啊?
  • 3 樓:回復:offsetHeight怎么會是100呢?你不是說offsetHeight是自身元素的高度,那應該是200才對啊?
    對,原文搞錯了,我的筆誤,已經糾正,謝謝。
  • 4 樓:評論
    offsetHeight應該包含border的寬度
  • 5 樓:評論
    目前已經支持了!
  • 6 樓:評論
    謝謝,搞懂了....
  • 7 樓:評論
    如果把上面代碼中的scrollTop換成scrollLeft,沒有變化啊,不會向左卷呢?
  • 8 樓:RE:如果把上面代碼中的scrollTop換成scrollLeft,沒有變化啊,不會向左卷呢?
    因為示例中的高度是超出了容器的,而寬度沒有,所以 scrollLeft 沒有變化。
標題:必填
內容:
最新22选5开奖公告