javascript之scrollTop | 易学教程

下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。
演示：（拖动滚动条，可以看到scrollTop值的变化）
这些文字显示在内层元素中。
scrollTop值是：

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"> 
<div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> 
这些文字显示在内层元素中。 
</div> 
</div>

解释：
内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条
初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。
当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。
当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px，这也就是此时的scrollTop值。

备注：

当html文档头部不包含任何“文档类型声明”时，需要用document.body.scrollTop获得正确的值，而document.documentElement.scrollTop的值为0
下面定义的get_scrollTop_of_body()方法可以处理这种差异

function get_scrollTop_of_body(){ 
var scrollTop; 
if(typeof window.pageYOffset != 'undefined'){ 
    scrollTop = window.pageYOffset; 
} 
else 
if(typeof document.compatMode != 'undefined' && 
document.compatMode != 'BackCompat'){ 
    scrollTop = document.documentElement.scrollTop; 
} 
else 
if(typeof document.body != 'undefined'){ 
    scrollTop = document.body.scrollTop; 
} 
return scrollTop; 
}

来源：http://www.cnblogs.com/gide/p/4616398.html

标签

scrolltop