js獲取窗口滾動條高度、窗口可視范圍高度、文檔實際內容高度、滾動條離瀏覽器底部的高度

1.獲取窗口可視范圍的高度

//獲取窗口可視范圍的高度
function getClientHeight(){  
    var clientHeight=0;  
    if(document.body.clientHeight&&document.documentElement.clientHeight){  
        var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }else{  
        var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
    }  
    return clientHeight;  
}

2.獲取窗口滾動條高度

function getScrollTop(){  
    var scrollTop=0;  
    if(document.documentElement&&document.documentElement.scrollTop){  
        scrollTop=document.documentElement.scrollTop;  
    }else if(document.body){  
        scrollTop=document.body.scrollTop;  
    }  
    return scrollTop;  
}

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

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

4.使用方法

window.onscroll=function(){
    // 窗口可視范圍的高度
    var height=getClientHeight(),
        // 窗口滾動條高度
        theight=getScrollTop(),
        // 窗口可視范圍的高度
        rheight=getScrollHeight(),
        // 滾動條距離底部的高度
        bheight=rheight-theight-height;
        
    document.getElementById('show').innerHTML='此時瀏覽器可見區域高度為：'+height+'<br />此時文檔內容實際高度為：'+rheight+'<br />此時滾動條距離頂部的高度為：'+theight+'<br />此時滾動條距離底部的高度為：'+bheight;
}