offsetTop,offsetHeight,scrollHeight,scrollTop，這些屬性曾經困擾了我很長很長很長時間。
今天花點功夫，徹底把他們搞清楚了。


假設 obj 為某個 HTML 控件。
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

offsetTop?可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區別是：
一、offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
二、offsetTop 只讀，而 style.top 可讀寫。
三、如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

scrollTop?是“卷”起來的高度值，示例：
<div style="width:100px;height:100px;overflow:hidden;" id="p">
　　<div style="width:50px;height:300px;" id="t">如果為 p 設置了 scrollTop，這些內容可能不會完全顯示。</div>
</div>
<script type="text/javascript">
　　var p = document.getElementById("p");
　　p.scrollTop = 10;
</script>
由于為外層元素 p 設置了 scrollTop，所以內層元素會向上卷。

scrollHeight 與 offsetHeight

offsetHeight是自身元素的高度，scrollHeight是?自身元素的高度+隱藏元素的高度(是不是可以理解成內層元素的offsetHeight值？？？)。

<div id="container" style=" width:100px; height:100px; overflow:auto;">

　　<p style=" height:250px; "></p>

</div>
<script>
　　alert(document.getElementById("container").offsetHeight);
　　alert(document.getElementById("container").scrollHeight);
</script>
將依次輸出100，250。因為已經指定了元素的height為100px，所以offsetHeight始終為100px；內部元素為 250px，而容器元素只有100px，那么還有150px的內容它無法顯示出來，但它卻是實際存在的，所以scrollHeight值100+150=250。

轉載于:https://www.cnblogs.com/wuwenjie/p/5580442.html

總結

以上是生活随笔為你收集整理的offsetTop,offsetHeight,scrollHeight,scrollTop的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。