scrollTop是什么及用法说明
来源:互联网 发布:惊鸿一面知乎 编辑:程序博客网 时间:2024/04/29 07:31
scrollTop是什么及用法说明
scrollTop属性是什么?
有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrollTop
指的是“元素中的内容”超出“元素上边界”的那部分的高度。
通过一个实例演示来讲述scrollTop属性是什么
下面的演示中,外层元素的高度值是200px
,内层元素的高度值是300px
。很明显,“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外,scrollTop
就等于这部分“不可见的内容”的高度。
演示:(拖动滚动条,可以看到scrollTop值的变化)
scrollTop值是:0
上面演示中可滚动元素的原码:
<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值是:100
输入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=读取外层元素A的scrollTop值并显示出来; //注册onscroll事件处理函数。当拖动滚动条时,会产生onscroll事件 var span_显示外层元素A的scrollTop值 = document.getElementById("显示外层元素A的scrollTop值"); //onscroll事件的处理函数 function 读取外层元素A的scrollTop值并显示出来() {span_显示外层元素A的scrollTop值.innerHTML=div_外层元素A.scrollTop; //读取“外层元素”此时的scrollTop的值并显示出来 } 读取外层元素A的scrollTop值并显示出来(); //页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0 div_外层元素A.scrollTop = 10; //通过js语句来设置scrollTop的值,本条语句会触发onscroll事件,使得"读取外层元素A的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()
函数可以处理这种差异,得到body元素的scrollTop值
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;}
- scrollTop是什么及用法说明
- scrollTop是什么及用法说明
- scrollTop是什么及用法说明
- scrollTop 用法说明
- scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的区别及用法
- js返回网页顶部 scrollTop及相关用法
- scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的区别及用法
- BCP说明及用法
- IsPostBack说明及用法
- keytool用法及说明
- keytool用法及说明
- keytool用法及说明
- keytool用法及说明
- document.body.scrollTop用法
- document.body.scrollTop用法
- 测试scrollTop用法
- document.body.scrollTop用法
- document.body.scrollTop用法
- linux下读写配置文件源码
- live555
- 页面定时刷新
- 友元
- oracle中在已有的表中增加或删除一列
- scrollTop是什么及用法说明
- SQLServer 2005 的命令行工具-sqlcmd
- 如此心机的老婆,不难教出一个优秀的女儿。谁娶了都是福。
- Mask 属性
- 配色方案总结
- poj 2373 Diving the Path
- CUDA SDK示例程序概览
- 准备从今天开始在这里记录我的学习ARM嵌入式的笔记了
- 腾讯的IP地址查询接口(JS)