scrollTop 用法说明

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

　　演示：（拖动滚动条，可以看到scrollTop值的变化）

　　这些文字显示在内层元素中。

　　scrollTop值是：

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　解释：

　　内层元素的高度值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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0_div%20%3D%20document.getElementById(%22%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0%22)%3B%20%0D%0A%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0_div.onscroll%3D%E8%AF%BB%E5%8F%96scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5%3B%20%0D%0A%2F%2F%2F%2F%E6%B3%A8%E5%86%8Conscroll%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0%E3%80%82%E5%BD%93%E6%8B%96%E5%8A%A8%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%97%B6%EF%BC%8C%E4%BC%9A%E4%BA%A7%E7%94%9Fonscroll%E4%BA%8B%E4%BB%B6%20%0D%0Avar%20span_%E6%BC%94%E7%A4%BA%E5%85%83%E7%B4%A0scrollTop%E7%9A%84%E5%80%BC%20%3D%20document.getElementById(%22%E6%BC%94%E7%A4%BA%E5%85%83%E7%B4%A0scrollTop%E7%9A%84%E5%80%BC%22)%3B%20%0D%0A%2F%2Fonscroll%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0%20%0D%0Afunction%20%E8%AF%BB%E5%8F%96scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5()%20%0D%0A%7Bspan_%E6%BC%94%E7%A4%BA%E5%85%83%E7%B4%A0scrollTop%E7%9A%84%E5%80%BC.innerHTML%3D%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0_div.scrollTop%3B%20%0D%0A%2F%2F%E8%AF%BB%E5%8F%96%22%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0%22%E6%AD%A4%E6%97%B6%E7%9A%84scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5%20%0D%0A%7D%20%0D%0A%E8%AF%BB%E5%8F%96scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5()%3B%20%0D%0A%2F%2F%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E5%90%8E%EF%BC%8C%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1%E6%AD%A4%E5%87%BD%E6%95%B0%E3%80%82%E6%98%BE%E7%A4%BA%E6%9C%80%E5%88%9D%E7%9A%84scrollTop%E5%80%BC%EF%BC%8C%E6%AD%A4%E6%97%B6%E7%9A%84%E5%80%BC%E4%B8%BA0%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　解释：

　　当拖动“外层元素的滚动条”时，会产生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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20div_%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A%20%3D%20document.getElementById(%22%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A%22)%3B%20%0D%0Adiv_%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A.onscroll%3D%E8%AF%BB%E5%8F%96scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5%3B%20%0D%0A%2F%2F%E6%B3%A8%E5%86%8Conscroll%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0%E3%80%82%E5%BD%93%E6%8B%96%E5%8A%A8%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%97%B6%EF%BC%8C%E4%BC%9A%E4%BA%A7%E7%94%9Fonscroll%E4%BA%8B%E4%BB%B6%20%0D%0Avar%20span_%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A%E7%9A%84scrollTop%E7%9A%84%E5%80%BC%20%3D%20document.getElementById(%22%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A%E7%9A%84scrollTop%E7%9A%84%E5%80%BC%22)%3B%20%0D%0A%2F%2Fonscroll%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0%20%0D%0Afunction%20%E8%AF%BB%E5%8F%96scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5()%20%0D%0A%7Bspan_%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A%E7%9A%84scrollTop%E7%9A%84%E5%80%BC.innerHTML%3Ddiv_%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A.scrollTop%3B%20%0D%0A%2F%2F%E8%AF%BB%E5%8F%96%22%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0%22%E6%AD%A4%E6%97%B6%E7%9A%84scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5%20%0D%0A%7D%20%0D%0A%E8%AF%BB%E5%8F%96scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5()%3B%20%0D%0A%2F%2F%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E5%90%8E%EF%BC%8C%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1%E6%AD%A4%E5%87%BD%E6%95%B0%E3%80%82%E6%98%BE%E7%A4%BA%E6%9C%80%E5%88%9D%E7%9A%84scrollTop%E5%80%BC%EF%BC%8C%E6%AD%A4%E6%97%B6%E7%9A%84%E5%80%BC%E4%B8%BA0%20%0D%0Adiv_%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A.scrollTop%20%3D%2010%3B%20%0D%0A%2F%2F%E9%80%9A%E8%BF%87js%E8%AF%AD%E5%8F%A5%E6%9D%A5%E8%AE%BE%E7%BD%AEscrollTop%E7%9A%84%E5%80%BC%2C%E6%9C%AC%E6%9D%A1%E8%AF%AD%E5%8F%A5%E4%BC%9A%E8%A7%A6%E5%8F%91onscroll%E4%BA%8B%E4%BB%B6%EF%BC%8C%E4%BD%BF%E5%BE%97%22%E8%AF%BB%E5%8F%96scrollTop%E7%9A%84%E5%80%BC%E5%B9%B6%E6%98%BE%E7%A4%BA%E5%87%BA%E6%9D%A5%22%E5%87%BD%E6%95%B0%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1%E3%80%82%20%0D%0Afunction%20%E8%AE%BE%E7%BD%AEscrollTop%E7%9A%84%E5%80%BC()%20%0D%0A%7B%20if(%22%22%20!%3D%20document.getElementById(%22%E8%BE%93%E5%85%A5scrollTop%E7%9A%84%E5%80%BC%22).value)%20%0D%0Adiv_%E5%A4%96%E5%B1%82%E5%85%83%E7%B4%A0A.scrollTop%20%3D%20document.getElementById(%22%E8%BE%93%E5%85%A5scrollTop%E7%9A%84%E5%80%BC%22).value%3B%20%0D%0Aelse%20alert(%22%E8%AF%B7%E8%BE%93%E5%85%A5%E4%B8%80%E4%B8%AA%E6%95%B0%E5%80%BC%22)%3B%20%0D%0A%7D%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　解释：

　　形如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">

　　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;

　　}

教程首页更多教程