js获取滚动条距离浏览器顶部,底部的高度

最新推荐文章于 2022-01-02 01:25:00 发布

alex8046

最新推荐文章于 2022-01-02 01:25:00 发布

阅读量2.2w

点赞数 2

文章标签： javascript 滚动条

javascript 专栏收录该内容

139 篇文章

订阅专栏

做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享，这个是同时兼容ie和firefox的。

首先我们需要知道的两个定义是：

滚动条距离浏览器顶部的高度 = 窗口滚动条高度；

滚动条距离浏览器底部的高度 = 文档（页面）内容实际高度 - 滚动条距离浏览器顶部的高度 - 窗口可视范围的高度；

好了，明白了这个定义，那我们就来具体看看如何获取各种高度的方法，下面同时举了一个示例。

获取窗口可视范围的高度

 
 function getClientHeight(){    
    var clientHeight=0;    
    if(document.body.clientHeight&&document.documentElement.clientHeight){    
        var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;            
    }else{    
        var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;        
    }    
    return clientHeight;    
}

获取窗口滚动条高度

 
 function getScrollTop(){    
    var scrollTop=0;    
    if(document.documentElement&&document.documentElement.scrollTop){    
        scrollTop=document.documentElement.scrollTop;    
    }else if(document.body){    
        scrollTop=document.body.scrollTop;    
    }    
    return scrollTop;    
}

获取文档内容实际高度

 
 function getScrollHeight(){    
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);    
}

下面是具体的示例代码，注意这里为了演示效果使用了固定悬浮框的效果，在ie下面固定悬浮效果与上面的代码有些冲突不起作用，这里不深究了，读者可以在firefox下面看效果，这个代码本身是没有问题的。

 
 <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js获取滚动条距离浏览器顶部,底部的高度</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
//取窗口可视范围的高度 
function getClientHeight(){    
    var clientHeight=0;    
    if(document.body.clientHeight&&document.documentElement.clientHeight){    
        var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;            
    }else{    
        var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;        
    }    
    return clientHeight;    
} 
//取窗口滚动条高度 
function getScrollTop(){    
    var scrollTop=0;    
    if(document.documentElement&&document.documentElement.scrollTop){    
        scrollTop=document.documentElement.scrollTop;    
    }else if(document.body){    
        scrollTop=document.body.scrollTop;    
    }    
    return scrollTop;    
} 
//取文档内容实际高度 
function getScrollHeight(){    
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);    
} 
window.onscroll=function(){ 
    var height=getClientHeight(); 
    var theight=getScrollTop(); 
    var rheight=getScrollHeight(); 
    var bheight=rheight-theight-height; 
    document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br />此时文档内容实际高度为：'+rheight+'<br />此时滚动条距离顶部的高度为：'+theight+'<br />此时滚动条距离底部的高度为：'+bheight; 
} 
function fixDiv(div_id,offsetTop){ 
    var offsetTop=arguments[1]?arguments[1]:0; 
    var Obj=$('#'+div_id); 
    var ObjObjTop=Obj.offset().top; 
    var isIE6=$.browser.msie && $.browser.version == '6.0'; 
    if(isIE6){ 
        $(window).scroll(function(){ 
            if($(window).scrollTop()<=ObjTop){ 
                    Obj.css({ 
                        'position':'relative', 
                        'top':0 
                    }); 
            }else{ 
                Obj.css({ 
                    'position':'absolute', 
                    'top':$(window).scrollTop()+offsetTop+'px', 
                    'z-index':1 
                }); 
            } 
        }); 
    }else{ 
        $(window).scroll(function(){ 
            if($(window).scrollTop()<=ObjTop){ 
                Obj.css({ 
                    'position':'relative', 
                    'top':0 
                }); 
            }else{ 
                Obj.css({ 
                    'position':'fixed', 
                    'top':0+offsetTop+'px', 
                    'z-index':1 
                }); 
            } 
        }); 
    } 
} 
$(function(){fixDiv('show',5);}); 
</script> 
</head> 
<body> 
<div style="height:500px;"></div> 
<div>http://www.daimajiayuan.com/sitejs-17231-1.html</div> 
<div id="show"></div> 
<div style="height:2000px;"></div> 
</body> 
</html>