scrollTop用法说明及图片文字向上滚动实例

作者: unvs 分类: Web前端 发布时间: 2011-08-08 13:03 ė12,694 views 6没有评论

 <div style="width:200px;height:300px;background-color:#555555;overflow:auto;" id="外层"> 

<div style="width:100px;height:400px;background-color:#FFFF00;" id="内层"> 
这些文字显示在内层中。 
</div> 
</div> 
上面是一个实例,外层的高度值是300px,内层的高度值是400px。很明显,“内层中的内容”高过了“外层”本身.当向下拖动滚动条时,有部分内容会隐没在“外层的上边界”之外,scrollTop就等于这部分“不可见的内容”的高度。

点击查看:效果预览
实例解释:初始状态下,内层的上边界和外层的上边界是重合的,没有任何内容超过外层上边界,当拖动滚动条到最底部时,内层的下边界与外层的下边界重合,超出的内容高度为:400px-300px=100px,这个也就是scrollTop值。

通过JS代码读取、写入scrollTop值
使用方式:element.scrollTop(而不是element.style.scrollTop)
1、读取scrollTop值,见实例代码:

<div style="width:200px;height:300px;background-color:#555555;overflow:auto;" id="outDiv"> 
<div style="width:100px;height:400px;background-color:#FFFF00;" id="inDiv"> 
这些文字显示在内层中。 
</div> 
</div> 
<p>scrollTop值是:<span id="showValue"></span></p> 
<script type="text/javascript"> 
var out_div = document.getElementById("outDiv"); 
out_div.onscroll=getValue; //读取scrollTop的值并显示出来
//注册onscroll事件并处理函数。当拖动滚动条时,会产生onscroll事件 
var show_value = document.getElementById("showValue"); 
//onscroll事件的处理函数 
function getValue() {
        show_value.innerHTML=out_div.scrollTop; //读取"外层"此时的scrollTop的值并显示出来
getValue(); //页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0
</script>

点击查看:效果预览

2、写入scrollTop值

<div style="width:200px;height:300px;background-color:#555555;overflow:auto;" id="outDiv"> 
<div style="width:100px;height:400px;background-color:#FFFF00;" id="inDiv"> 
这些文字显示在内层元素中。 
</div> 
</div> 
<p>scrollTop值是:<span id="showValue"></span></p>
<p><button type="button" onclick="out_Div.scrollTop=50;">把scrollTop设为50</button> 
<button type="button" onclick="out_Div.scrollTop=500;">把scrollTop设为500</button> 
</p> 
<p>输入scrollTop的值:<input type="text" id="setValue" value="" /> 
<button type="button" onclick="setBtn()" name="setBtn">确定</button> 
</p> 
<script type="text/javascript"> 
var out_Div = document.getElementById("outDiv"); 
out_Div.onscroll=getValue; 
//注册onscroll事件处理函数。当拖动滚动条时,会产生onscroll事件 
var span_showValue = document.getElementById("showValue"); 
//onscroll事件的处理函数 
function getValue() 
{span_showValue.innerHTML=out_Div.scrollTop; 
//读取"外层元素"此时的scrollTop的值并显示出来 
getValue(); 
//页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0 
out_Div.scrollTop = 10; 
//通过js语句来设置scrollTop的值,本条语句会触发onscroll事件,使得"读取scrollTop的值并显示出来"函数执行一次。 
function setBtn() 
{ if("" != document.getElementById("setValue").value) 
out_Div.scrollTop = document.getElementById("setValue").value; 
else alert("请输入一个数值"); 
}</script>

点击查看:效果预览

附件查看:源码下载

 

本博文章基本上属于原创或收集整理,都是心血结晶。
欢迎转载分享,转载请注明出处,谢谢!
本文地址:scrollTop用法说明及图片文字向上滚动实例

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ɣ回顶部