碼上歡樂
相關內容    簡體    繁體

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

本文轉載自   查看原文   2016-05-17 09:50   1991 

做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>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 監聽滾動條距離瀏覽器底部的距離 js獲取窗口滾動條高度、窗口可視范圍高度、文檔實際內容高度、滾動條離瀏覽器底部的高度 js基礎--獲取瀏覽器當前頁面的滾動條高度的兼容寫法 js獲取瀏覽器滾動條距離頂端的距離 js獲取瀏覽器滾動條距離頂端的距離 元素隨着滾動條滾動而滾動，但是到瀏覽器窗口頂部的距離是固定的功能代碼 獲取瀏覽器滾動條高度 js,jquery 獲取滾動條高度和位置, 元素距頂部距離 js 判斷div距離瀏覽器頂部或者底部的距離 js/jquery獲取瀏覽器窗口可視區域高度和寬度以及滾動條高度實現代碼
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM