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