用 Javascript 獲取頁面大小、窗口大小和滾動條位置

 一，window對象的屬性scrollMaxX,scrollMaxY:

    傳回的是可捲動的最大長度，其值爲整數，單位爲像素。限Firefox使用。

    文件的全寬 = innerWidth + scrollMaxX

    文件的全高 = innerHeight + scrollMaxY

二。文檔頁面的大小,包括滾動條未顯示的部分。

    function getScrollPageSize(){

     var xScroll,yScroll;

     if(windows.innerHeight && window.scrollMaxY){

         //針對Friefox

         xScroll = windows.innerWidth + window.scrollMaxX;

         yScroll = windows.innerHeight + window.scrollMaxY;

     }else if(document.body.scrollHeight > document.body.offsetHeight){

         //all but firefox and IE Mac

         xScroll = document.body.scrollWidth;

         yScroll = document.body.scrollHeight;

     }else if(document.body){

         xScroll = document.body.offsetWidth;

         yScroll = document.body.offsetHeight;

     }

    return {"xScroll":xScroll,"yScroll":yScroll};

}

三。展示窗口頁面的大小：（不是瀏覽器窗口本身）

    function getWinSize(){

    var pageWidth = windows.innerWidth,

        pageHeight = windows.innerHeight;

    if(typeof pageWidth != "number"){

        if(document.compatMode == "CSS1Compat"){

           //IE,Firefox,Safari,Opera,Chrome

           pageWidth = document.documentElement.clientWidth;

           pageHeight = document.documentElement.clientHeight;

        }else{

           //IE6的混雜模式下

           pageWidth = document.body.clientWidth;

           pageHeight = document.body.clientHeight;

        }

    }

    return {"pageWidth":pageWidth,"pageHeight":pageHeight};

}

 

四。獲得滾動條位置的 Javascript 函數

    方法一：

          function scrollPos(oDocument){

               oDocument = oDocument || document;

               var dd = oDocument.documentElement;

               var db = oDocument.body;

               return {

                   top: Math.max(window.pageYOffset||0, dd.scrollTop, db.scrollTop),

                   left: Math.max(window.pageXOffset||0, dd.scrollLeft, db.scrollLeft)

               };

          }

       方法二：

           function f_clientWidth() {

return f_filterResults (

windows.innerWidth ? windows.innerWidth : 0,

document.documentElement ? document.documentElement.clientWidth : 0,

document.body ? document.body.clientWidth : 0

);

}

function f_clientHeight() {

return f_filterResults (

windows.innerHeight ? windows.innerHeight : 0,

document.documentElement ? document.documentElement.clientHeight : 0,

document.body ? document.body.clientHeight : 0

);

}

function f_scrollLeft() {

return f_filterResults (

window.pageXOffset ? window.pageXOffset : 0,

document.documentElement ? document.documentElement.scrollLeft : 0,

document.body ? document.body.scrollLeft : 0

);

}

function f_scrollTop() {

return f_filterResults (

window.pageYOffset ? window.pageYOffset : 0,

document.documentElement ? document.documentElement.scrollTop : 0,

document.body ? document.body.scrollTop : 0

);

}

function f_filterResults(n_win, n_docel, n_body) {

var n_result = n_win ? n_win : 0;

if (n_docel && (!n_result || (n_result > n_docel)))

n_result = n_docel;

return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;

}

    這個方法的兼容性是最好的，能兼容所有的瀏覽器和平臺。

 

方法三：

    if (typeof window.pageYOffset != 'undefined') { 

scrollPosTop = window.pageYOffset; 
scrollPosLeft = window.pageXOffset; 
docWidth = windows.innerWidth; 
docHeight = windows.innerHeight; 
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 
scrollPosTop = document.documentElement.scrollTop; 
scrollPosLeft = document.documentElement.scrollLeft; 
docWidth = document.documentElement.clientWidth; 
docHeight = document.documentElement.clientHeight; 
} else if (typeof document.body != 'undefined') { 
scrollPosTop = document.body.scrollTop; 
scrollPosLeft = document.body.scrollLeft; 
docWidth = document.body.clientWidth; 
docHeight = document.body.clientHeight; 
} 

這種方法利用到document.compatMode屬性，當值爲BackCompat時爲html，即沒有DOCTYPE，當值爲CSS1Compat時爲有DOCTYPE的標準模式。