JavaScript: How to determine the web "fold" programmatically?

Question

Question: How can I determine the "fold" programatically (how much vertical content the browser is displaying)?

The "fold" defined as where you can no longer see / have to scroll.

I've tried with JavaScript to simply determine the browser window size to determine the fold; unfortunately - this doesn't work well because some browsers have tabs, etc and even though you might have 2 browsers windows at the same size - each browser might be displaying a different vertical size of content.

Answer 1

window.innerHeight is the height currently visible.
document.height is the total height of the webpage.

The "fold" defined as where you can no longer see / have to scroll.

var fold = document.height - window.innerHeight;

---

Edit: For IE developers. thanks Goodman

Answer 2

Determining the height of the window vs. the height of the document in a cross-browser compatible way is a bit complicated . . . unfortunately Internet Explorer does not support window.innerHeight . . . you can use document.body.clientHeight and document.documentElement.clientHeight, but which one means what depends on the browser and version.

From the latter site linked above, here's a cross-browser compatible way to get the equivalent of window.innerWidth and window.innerHeight:

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth ||     document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight     ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}