• 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. } 

    这里是示例代码效果图：

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

    下面是具体的示例代码，注意这里为了演示效果使用了固定悬浮框的效果，在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>
  • 相关阅读:
    Javascript实现局部刷新
    Javascript模块化开发－轻巧自制
    javascript面向对象实例
    Javascript兼容和CSS兼容总结
    隐藏关机按钮
    数组排序
    常用数组获取最新和第一个元素值
    php 操作redis 以及几个常用命令
    git 常用命令
    JSON.parse和JSON.stringify的区别
  • 原文地址：https://www.cnblogs.com/firstdream/p/5500403.html
Copyright © 2020-2023  润新知