js获取滚动条位置|js获取滚动条高度
获取滚动条位置:
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>
原文地址:http://www.35ui.cn/post/20120928709.html 标签:
上一条: js根据id,class,标签获取元素缩写
下一条: href=#与href=javascript:void(0)区别整理