js獲取滾動條距離瀏覽器頂部,底部的高度,兼容ie和firefox

時間  2019-11-09
標籤 獲取 滾動條 距離 瀏覽器 頂部 底部 高度 兼容 firefox 欄目 JavaScript 简体版
原文   原文鏈接

作web開發常常會碰到須要獲取瀏覽器的滾動條與頂部和底部的距離，而後作相應的處理動做。下面做者就如何經過js來獲取瀏覽器滾動條距離瀏覽器頂部和底部的高度作一下分享，這個是同時兼容ie和firefox的。javascript

獲取窗口可視範圍的高度php

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

獲取窗口滾動條高度css

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

獲取文檔內容實際高度html

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

這裏是示例代碼效果圖：java

js獲取滾動條距離瀏覽器頂部,底部的高度,兼容ie和firefox

下面是具體的示例代碼，注意這裏爲了演示效果使用了固定懸浮框的效果，在ie下面固定懸浮效果與上面的代碼有些衝突不起做用，這裏不深究了，讀者能夠在firefox下面看效果，這個代碼自己是沒有問題的。jquery

  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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程