jquery中的scrollTop()和scrollLeft()应该怎么用?【转】

下面的演示中,外层元素的高度值是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值。 
通过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" onclick="div_外层元素A.scrollTop=50;">把scrollTop设为50</button> 
<button type="button" onclick="div_外层元素A.scrollTop=500;">把scrollTop设为500</button> 
</p> 
<p>输入scrollTop的值:<input type="text" id="输入scrollTop的值" value="" /> 
<button type="button" onclick="设置scrollTop的值()" 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

posted @ 2013-01-16 11:47  snowinmay  阅读(7621)  评论(1编辑  收藏  举报