js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

Posted 有梦就能实现

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox相关的知识，希望对你有一定的参考价值。

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

获取窗口可视范围的高度

  1. function getClientHeight(){     
  2.     var clientHeight=0;     
  3.     if(document.body.clientHeight&&document.documentElement.clientHeight){     
  4.         var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;             
  5.     }else{     
  6.         var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;         
  7.     }     
  8.     return clientHeight;     
  9. } 

获取窗口滚动条高度

  1. function getScrollTop(){     
  2.     var scrollTop=0;     
  3.     if(document.documentElement&&document.documentElement.scrollTop){     
  4.         scrollTop=document.documentElement.scrollTop;     
  5.     }else if(document.body){     
  6.         scrollTop=document.body.scrollTop;     
  7.     }     
  8.     return scrollTop;     
  9. } 

获取文档内容实际高度

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

这里是示例代码效果图：

技术分享

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

  1. <html xmlns="http://www.phpernote.com/javascript-function/754.html">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>js获取滚动条距离浏览器顶部,底部的高度</title>  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
  6. <script type="text/javascript">  
  7. //取窗口可视范围的高度  
  8. function getClientHeight(){     
  9.     var clientHeight=0;     
  10.     if(document.body.clientHeight&&document.documentElement.clientHeight){     
  11.         var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;             
  12.     }else{     
  13.         var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;         
  14.     }     
  15.     return clientHeight;     
  16. }  
  17. //取窗口滚动条高度  
  18. function getScrollTop(){     
  19.     var scrollTop=0;     
  20.     if(document.documentElement&&document.documentElement.scrollTop){     
  21.         scrollTop=document.documentElement.scrollTop;     
  22.     }else if(document.body){     
  23.         scrollTop=document.body.scrollTop;     
  24.     }     
  25.     return scrollTop;     
  26. }  
  27. //取文档内容实际高度  
  28. function getScrollHeight(){     
  29.     return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);     
  30. }  
  31. window.onscroll=function(){  
  32.     var height=getClientHeight();  
  33.     var theight=getScrollTop();  
  34.     var rheight=getScrollHeight();  
  35.     var bheight=rheight-theight-height;  
  36.     document.getElementById(‘show‘).innerHTML=‘此时浏览器可见区域高度为：‘+height+‘<br />此时文档内容实际高度为：‘+rheight+‘<br />此时滚动条距离顶部的高度为：‘+theight+‘<br />此时滚动条距离底部的高度为：‘+bheight;  
  37. }  
  38. function fixDiv(div_id,offsetTop){  
  39.     var offsetTop=arguments[1]?arguments[1]:0;  
  40.     var Obj=$(‘#‘+div_id);  
  41.     var ObjTop=Obj.offset().top;  
  42.     var isIE6=$.browser.msie && $.browser.version == ‘6.0‘;  
  43.     if(isIE6){  
  44.         $(window).scroll(function(){  
  45.             if($(window).scrollTop()<=ObjTop){  
  46.                     Obj.css({  
  47.                         ‘position‘:‘relative‘,  
  48.                         ‘top‘:0  
  49.                     });  
  50.             }else{  
  51.                 Obj.css({  
  52.                     ‘position‘:‘absolute‘,  
  53.                     ‘top‘:$(window).scrollTop()+offsetTop+‘px‘,  
  54.                     ‘z-index‘:1  
  55.                 });  
  56.             }  
  57.         });  
  58.     }else{  
  59.         $(window).scroll(function(){  
  60.             if($(window).scrollTop()<=ObjTop){  
  61.                 Obj.css({  
  62.                     ‘position‘:‘relative‘,  
  63.                     ‘top‘:0  
  64.                 });  
  65.             }else{  
  66.                 Obj.css({  
  67.                     ‘position‘:‘fixed‘,  
  68.                     ‘top‘:0+offsetTop+‘px‘,  
  69.                     ‘z-index‘:1  
  70.                 });  
  71.             }  
  72.         });  
  73.     }  
  74. }  
  75. $(function(){fixDiv(‘show‘,5);});  
  76. </script>  
  77. </head>  
  78. <body>  
  79. <div style="height:500px;"></div>  
  80. <div>http://www.phpernote.com/jquery/251.html</div>  
  81. <div id="show"></div>  
  82. <div style="height:2000px;"></div>  
  83. </body>  
  84. </html>

以上是关于js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox的主要内容，如果未能解决你的问题，请参考以下文章

原生JS 和 JQ 获取滚动条的高度，以及距离顶部的高度

如何获取元素距离页面顶部的高度

js控制当滚动条到最底部时隐藏某个div

getBoundingClientRect

js如何获取滚动条的高度

jquery获取元素到屏幕底的可视距离