新闻中心当前位置:星鸿娱乐 > 新闻中心 > >

scrollTop 用法说明

  

[scrollTop,用法]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的值,并在下方文字中显示出来。

  
上面的演示实例的完整原码:  

  
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  
解释:  
当拖动“外层元素的滚动条”时,会产生onscroll事件。为这个事件注册一个名为读取scrollTop的值并显示出来的处理函数  
在读取scrollTop的值并显示出来这个事件处理函数中,通过外层元素_div.scrollTop得到“外层元素”当时的scrollTop的值,并显示在页面上。

  
通过js代码来设置scrollTop的值  
对上面的演示例子作一些修改。添加功能:通过js语句来设置scrollTop的值  
示例:  
这些文字显示在内层元素中。

  
scrollTop值是:  
把scrollTop设为50把scrollTop设为500  
输入scrollTop的值:确定  
上面的演示实例的完整原码:  

  
[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  
代码如下:

  
  
  
alert("document.documentElement.scrollTop:"+document.documentElement.scrollTop //"正确的值"  
+"document.body.scrollTop:"+document.body.scrollTop 星鸿娱乐注册 //"值为0"  
);  
  
  
当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;  
}  

(责任编辑:admin)

上一篇:JavaScript检测浏览器cookie是否已经启动的方法

下一篇:星鸿娱乐平台:js中iframe调用父页面的方法

推荐内容

客户服务热线

400 888 8932

在线客服