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 除外）。