-- 作者：admin
-- 发布时间：2011/9/9 9:52:35
-- scrollTop 用法说明
scrollTop属性是什么? 有些情况下,“元素中内容”的高度会超过“元素本身”的高度,
下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。
演示：（拖动滚动条，可以看到scrollTop值的变化）
这些文字显示在内层元素中。
scrollTop值是：
以下内容为程序代码:
1 ＜div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"＞
2 ＜div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"＞
3 这些文字显示在内层元素中。
4 ＜/div＞
5 ＜/div＞
解释：
内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条
初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。
当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。
当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px，这也就是此时的scrollTop值。
通过js代码来读取，写入scrollTop的值
注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop
通过js代码来读取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>
<p>scrollTop值是：<span id="演示元素scrollTop的值"></span></p>
<script type="text/javascript">
var 外层元素_div = document.getElementById("外层元素");
外层元素_div.onscroll=读取scrollTop的值并显示出来;
////注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件
var span_演示元素scrollTop的值 = document.getElementById("演示元素scrollTop的值");
//onscroll事件的处理函数
function 读取scrollTop的值并显示出来()
{span_演示元素scrollTop的值.innerHTML=外层元素_div.scrollTop;
//读取"外层元素"此时的scrollTop的值并显示出来
}
读取scrollTop的值并显示出来();
//页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0
</script>
解释：
当拖动“外层元素的滚动条”时，会产生onscroll事件。为这个事件注册一个名为读取scrollTop的值并显示出来的处理函数
在读取scrollTop的值并显示出来这个事件处理函数中，通过外层元素_div.scrollTop得到“外层元素”当时的scrollTop的值，并显示在页面上。
通过js代码来设置scrollTop的值
对上面的演示例子作一些修改。添加功能：通过js语句来设置scrollTop的值
示例：
这些文字显示在内层元素中。
scrollTop值是：
把scrollTop设为50把scrollTop设为500
输入scrollTop的值:确定
上面的演示实例的完整原码:
以下内容为程序代码:
<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素A">
<div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素A">
这些文字显示在内层元素中。
</div>
</div>
<p>scrollTop值是：<span id="外层元素A的scrollTop的值"></span></p>
<p><button type="button" >把scrollTop设为50</button>
<button type="button" >把scrollTop设为500</button>
</p>
<p>输入scrollTop的值:<input type="text" id="输入scrollTop的值" value="" />
<button type="button" name="设置scrollTop的值">确定</button>
</p>
<script type="text/javascript">
var div_外层元素A = document.getElementById("外层元素A");
div_外层元素A.onscroll=读取scrollTop的值并显示出来;
//注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件
var span_外层元素A的scrollTop的值 = document.getElementById("外层元素A的scrollTop的值");
//onscroll事件的处理函数
function 读取scrollTop的值并显示出来()
{span_外层元素A的scrollTop的值.innerHTML=div_外层元素A.scrollTop;
//读取"外层元素"此时的scrollTop的值并显示出来
}
读取scrollTop的值并显示出来();
//页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0
div_外层元素A.scrollTop = 10;
//通过js语句来设置scrollTop的值,本条语句会触发onscroll事件，使得"读取scrollTop的值并显示出来"函数执行一次。
function 设置scrollTop的值()
{ if("" != document.getElementById("输入scrollTop的值").value)
div_外层元素A.scrollTop = document.getElementById("输入scrollTop的值").value;
else alert("请输入一个数值");
}</script>
解释：
形如div_外层元素A.scrollTop = 12345;的赋值语句会触发onscroll事件，使得读取scrollTop的值并显示出来函数执行一次
上一个例子中已经提到：当拖动滚动条到最底部时，scrollTop=300px-200px=100px，这是scrollTop能够取的最大值。当用更大的值赋给scrollTop时，scrollTop会自动把它转变为100。例如上面的“把scrollTop设为500”按钮，scrollTop会把500转变为100。
得到body元素的scrollTop
body元素的scrollTop是超出“浏览器窗口上边界”的内容的高度
当html文档头部包含有“文档类型声明”时，需要用document.documentElement.scrollTop获得正确的值，而document.body.scrollTop的值为0
以下内容为程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
alert("document.documentElement.scrollTop:"+document.documentElement.scrollTop //"正确的值"
+"document.body.scrollTop:"+document.body.scrollTop //"值为0"
);
</script>
当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.jb51.net/article/18368.htm
[此贴子已经被作者于2011-9-9 9:53:21编辑过]
|