[size=large][b]scrollTop[/b][/size]
[size=medium]外层元素的高度值是200px,内层元素的高度值是300px。很明显,“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外,scrollTop就等于这部分“不可见的内容”的高度。
内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示,而外层元素把overflow设置为auto,因此外层元素的右侧会出现一个上下方向的滑动条 初始状态下,“内层元素的上边界”和“外层元素的上边界”重合,没有任何内容超过“外层元素的上边界”,此时scrollTop属性的值为0。 当向下拖动滚动条时,超过“外层元素的上边界”的内容会逐渐增多,scrollTop值就等于这些超出的部分。 当拖动滚动条到最底部时,“内层元素的下边界”和“外层元素的下边界”重合,超过“外层元素的上边界”的内容的高度=300px-200px=100px,这也就是此时的scrollTop值。
注意:scrollTop的使用方式是element.scrollTop,而不是element.style.scrollTop[/size]
[size=large][b]offsetHeight、scrollHeight[/b][/size]
[img]http://dl2.iteye.com/upload/attachment/0094/9237/d083fb32-961c-3472-be42-d9ee436cc11d.jpg[/img]
[size=medium] offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度。
将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为100+150=250。[/size]
<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素">
<div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素">
这些文字显示在内层元素中。
</div>
</div>
[size=medium]外层元素的高度值是200px,内层元素的高度值是300px。很明显,“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外,scrollTop就等于这部分“不可见的内容”的高度。
内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示,而外层元素把overflow设置为auto,因此外层元素的右侧会出现一个上下方向的滑动条 初始状态下,“内层元素的上边界”和“外层元素的上边界”重合,没有任何内容超过“外层元素的上边界”,此时scrollTop属性的值为0。 当向下拖动滚动条时,超过“外层元素的上边界”的内容会逐渐增多,scrollTop值就等于这些超出的部分。 当拖动滚动条到最底部时,“内层元素的下边界”和“外层元素的下边界”重合,超过“外层元素的上边界”的内容的高度=300px-200px=100px,这也就是此时的scrollTop值。
注意:scrollTop的使用方式是element.scrollTop,而不是element.style.scrollTop[/size]
[size=large][b]offsetHeight、scrollHeight[/b][/size]
[img]http://dl2.iteye.com/upload/attachment/0094/9237/d083fb32-961c-3472-be42-d9ee436cc11d.jpg[/img]
[size=medium] offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度。
将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为100+150=250。[/size]