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

相关阅读

你前面那位网友看了:有哪些 .NET 混淆工具?

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
  • 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 没有变化。
赞助商们