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;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" 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="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red; 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。
轉：http://hi.baidu.com/lampers/item/1605adc13daa00350931c6fc
附：http://www.cnblogs.com/wang726zq/archive/2012/05/10/2494256.html
我認為我們想要兩個東西：
- 一是 scrollWidth（scrollHeight），雖然它用處不大，但應該比 offsetWidth（offsetHeight）有用得多。它表示的是文檔區的寬度（高度），比如一個網頁，特別是門戶網站，拖很長，就要把沒有顯示出來的內容都計算進去。
- 二是視口 viewport，就是 clientWidth，就是窗口中可顯示內容的那塊區域，就是我們常常看到頁面上飛行廣告，飛來飛去，碰到邊邊要反彈的那一塊。