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

素颜马尾好姑娘i 2022-07-16 02:12 288阅读 0赞

做web开发经常会碰到需要获取[浏览器][Link 1]的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过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>

源引：http://www.daimajiayuan.com/sitejs-17250-1.html

[Link 1]: http://www.daimajiayuan.com/sitejs-5791-1.html