js擷取視窗捲軸高度、視窗可視範圍高度、文檔實際內容高度、捲軸離瀏覽器底部的高度

標籤：else   class   scrollto   cti   func   ons   文檔   function   捲軸   

1.擷取視窗可視範圍的高度

 1 //擷取視窗可視範圍的高度 2 function getClientHeight(){   3     var clientHeight=0;   4     if(document.body.clientHeight&&document.documentElement.clientHeight){   5         var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; 6     }else{   7         var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; 8     }   9     return clientHeight;  10 }

2.擷取視窗捲軸高度

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 }

3.擷取文檔內容實際高度

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

4.使用方法

 1 window.onscroll=function(){ 2     // 視窗可視範圍的高度 3     var height=getClientHeight(), 4         // 視窗捲軸高度 5         theight=getScrollTop(), 6         // 視窗可視範圍的高度 7         rheight=getScrollHeight(), 8         // 捲軸距離底部的高度 9         bheight=rheight-theight-height;10         11     document.getElementById(‘show‘).innerHTML=‘此時瀏覽器可見地區高度為：‘+height+‘<br />此時文檔內容實際高度為：‘+rheight+‘<br />此時捲軸距離頂部的高度為：‘+theight+‘<br />此時捲軸距離底部的高度為：‘+bheight;12 }

 

js擷取視窗捲軸高度、視窗可視範圍高度、文檔實際內容高度、捲軸離瀏覽器底部的高度