用 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的標準模式。