首页/javascript外包/js获取滚动条位置|js获取滚动条高度

js获取滚动条位置|js获取滚动条高度

发布-xiaoming | 浏览量-

获取滚动条位置:

     document.body.scrollTop (滚动条离页面最上方的距离)

     document.body.scrollLeft   (滚动条离页面最左方的距离)

当用js获取当前垂直或者水平方向滚动条位置的时候,使用"document.body.scrollTop"或者"document.body.scrollLeft"是无效的,得到的数值永远是0。但是,当写在“onscroll”事件里面的时候,上述方法可以获得当前滚动条的位置。

所以为了准确取得当前滚动条的位置,正确的使用方法是

      document.documentElement.scrollTop:垂直方向
      document.documentElement.scrollLeft:水平方向

 <!--附例子:当滚动条离顶部超过300像素时候,层gotop显示,否则隐藏-->

<script type="text/javascript">
window.onscroll=function()
{
 var a=document.documentElement.scrollTop
 if(a>300){
 document.getElementById("gotop").style.display="block";
 }
 else{
  document.getElementById("gotop").style.display="none";

 }
}
</script>

 

关于Chrome(谷歌浏览器)

document.documentElement.scrollTop==0信息显示浮动层时,IE、Firefox下都能显示正常,但Chrome下出现了浮动层永远显示在


上面,经过仔细分析,发现Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.scrollTop后,则显示正常。

  由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或

者是奇怪模式下都只有一个会返回有效的值,所以都加上也不会有问题(看来上面的问题是Chrome可能把文档当作非标准文档来解析了)。

  即获取高度时使用document.documentElement.scrollTop+document.body.scrollTop,经测试,代码在

IE、Firefox、Chrome下都能显示正常了。
 

<script type="text/javascript">
window.onscroll=function()
{
 var a=document.documentElement.scrollTop+document.body.scrollTop //兼容谷歌浏览器
 if(a>300){
 document.getElementById("gotop").style.display="block";
 }
 else{
  document.getElementById("gotop").style.display="none";

 }
}
</script>

 

 HTML教程做网页href链接代码大全

 

javascript获取浏览器边距大全

js页面跳转的几种方式大全

Javascript中的this、with如何使用

原文地址:http://www.35ui.cn/post/20120928709.html

标签

上一条: js根据id,class,标签获取元素缩写
下一条: href=#与href=javascript:void(0)区别整理

或许你还对下面的文章感兴趣