JavaScript: How to determine the web "fold" programmatically?
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 siz开发者_StackOverflow社区e of content.
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
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 );
}
精彩评论