Javascript Get Page Height With Scroll

function getPageSizeWithScroll(){
	if (window.innerHeight && window.scrollMaxY) {// Firefox
		yWithScroll = window.innerHeight + window.scrollMaxY;
		xWithScroll = window.innerWidth + window.scrollMaxX;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		yWithScroll = document.body.scrollHeight;
		xWithScroll = document.body.scrollWidth;
	} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
		yWithScroll = document.body.offsetHeight;
		xWithScroll = document.body.offsetWidth;
  	}
	arrayPageSizeWithScroll = new Array(xWithScroll,yWithScroll);
	//alert( 'The height is ' + yWithScroll + ' and the width is ' + xWithScroll );
	return arrayPageSizeWithScroll;
}

var Client = {
  viewportWidth: function() {
    return self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth);
  },

  viewportHeight: function() {
    return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
  },
  
  viewportSize: function() {
    return { width: this.viewportWidth(), height: this.viewportHeight() };
  }
};

1.   #1 Comment Posted by Erik Fleischer on Dec 7, 04:21 PM

   This is simpler and does the trick nicely:

   var _docHeight = document.height || document.body.offsetHeight;
   var _docWidth = document.width || document.body.offsetWidth;

2.   #2 Comment Posted by Erik Fleischer on Dec 12, 09:31 AM

   I forgot the parentheses in my previous comment:

   var _docHeight = (document.height || document.body.offsetHeight);
   var _docWidth = (document.width || document.body.offsetWidth);

   But that’s a “quick’n’dirty” way of doing it. Safer and better to use:

   var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
   var _docWidth = (document.width !== undefined) ? document.width : document.body.offsetWidth;

3.   #3 Comment Posted by minilion on Dec 15, 08:43 AM

   Fix for IE7 (at then end)
   if( window.innerHeight && window.scrollMaxY ) // Firefox {
   pageWidth = window.innerWidth + window.scrollMaxX;
   pageHeight = window.innerHeight + window.scrollMaxY;
   }
   else if( document.body.scrollHeight > document.body.offsetHeight ) // all but Explorer Mac
   {
   pageWidth = document.body.scrollWidth;
   pageHeight = document.body.scrollHeight;
   }
   else // works in Explorer 6 Strict, Mozilla (not FF) and Safari
   { pageWidth = document.body.offsetWidth + document.body.offsetLeft; pageHeight = document.body.offsetHeight + document.body.offsetTop; }

4.   #4 Comment Posted by Andrei on Jan 9, 04:59 AM

   A very nice script! Works in my FF, Opera and IE. Hope to see the day with standards …

5.   #5 Comment Posted by mactimus-prime on Jan 19, 10:52 AM

   function Viewport(){ this.windowX = (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth; this.windowY = (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight; this.scrollX = (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft; this.scrollY = (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop; this.pageX = (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth; this.pageY = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;
   }

   The comments box doesn’t allow much in the way of formatting, but this returns window size, scroll offset, and page size.

6.   #6 Comment Posted by B on Mar 21, 01:53 PM

   None of these seem to return the entire length including the portion below the visible area on a page in Firefox 2… anyone know why?

7.   #7 Comment Posted by B on Mar 21, 02:07 PM

   Nevermind… me being dumb, I was loading this inline in the header to test — the page needs to load BEFORE that value is > 0…

8.   #8 Comment Posted by Cheng on Mar 28, 07:34 PM

   This is nice!

9.   #9 Comment Posted by aswad32 on Apr 27, 08:11 AM

   i really appreciate this code, thank u very much

10.   #10 Comment Posted by Artx on Jun 13, 12:47 PM

    well, you deleted my previous post (or I forgot to SUBMIT).. most likely you thaught is`a spam, but actualy the link destination was a page, where you can find a nice height, width etc. scripts, used in wordpress engine addons.
    Pay attention on lightbox.js files functions getPageScroll() and getPageSize()

11.   #11 Comment Posted by Artx on Jun 13, 12:49 PM

    SORRY, the address:
    http://www.huddletogether.com/projects/lightbox/

12.   #12 Comment Posted by molokoloco on Jul 17, 06:26 AM

    Oups !
    http://elfz.laacz.lv/beautify/?

13.   #13 Comment Posted by molokoloco on Jul 17, 06:28 AM

    Hello,

    I’am trying to make it work on FF and IE it’s look pretty with your code “extended” ;)

    var client = { // Testé FF/IE getPage: function() { var pageWidth = 720; var pageHeight = 576; var scrollArr = this.getScroll(); var winArr = this.getWindow(); pageWidth = winArr.width + scrollArr.left; pageHeight = winArr.height + scrollArr.top; return { scrollX: scrollArr.left, scrollY: scrollArr.top, winW: winArr.width, winH: winArr.height, pageW: pageWidth, pageY: pageHeight }; }, getScroll: function() { return { left: this.scrollLeft(), top: this.scrollTop() }; }, getWindow: function() { return { width: this.windowWidth(), height: this.windowHeight() }; }, scrollLeft: function() { var xScroll = 0; if (self.pageXOffset) xScroll = self.pageXOffset; else if (document.documentElement && document.documentElement.scrollLeft) xScroll = document.documentElement.scrollLeft; else if (document.body) xScroll = document.body.scrollLeft; return xScroll; }, scrollTop: function() { var yScroll = 0; if (self.pageYOffset) yScroll = self.pageYOffset; else if (document.documentElement && document.documentElement.scrollTop) yScroll = document.documentElement.scrollTop; else if (document.body) yScroll = document.body.scrollTop; return yScroll; }, windowWidth: function() { var xWin = 720; if (self.innerHeight) xWin = self.innerWidth; else if (document.documentElement && document.documentElement.clientWidth) xWin = document.documentElement.clientWidth; else if (document.body) xWin = document.body.clientWidth; return xWin; }, windowHeight: function() { var yWin = 576; if (self.innerHeight) yWin = self.innerHeight; else if (document.documentElement && document.documentElement.clientHeight) yWin = document.documentElement.clientHeight; else if (document.body) yWin = document.body.clientHeight; return yWin; }
    };

14.   #14 Comment Posted by Linn on Oct 12, 06:58 AM

    Thanks a bunch for this! I’ve been working on a CC project and this code made my job a whole lot easier.