CODEWITHSUNDEEP
javascriptjquerydom
B T
B T

Reputation: 60855

Get height at which scroll bars will appear in javascript

Here's a couple of ways to ask this question:

This question is related, but the answer doesn't do what I want in the case of relative heights: Finding the full height of the content of a page/document that can have absolutely positioned elements

I made a js fiddle of what I'm talking about: http://tinyurl.com/kgf8dae . Unfortunately, jsfiddle seems to break the relative height put on div e - run it as an html page in a normal browser to see the real behavior.

Upvotes: 2

Views: 1454

Answers (3)

Matt Rohland
Matt Rohland

Reputation: 706

Using the HTML/CSS from the example your provided via (jsfiddle.net/RMe3n/1). The answer is and always will be 242.

However, I assume you're looking for a more dynamic approach. Running the following after DOM ready will also produce 242:

var answer = 0;
$('#absolutes > div').each(function(){
    var h = $(this).outerHeight(true);
    if(answer < h) answer = h;
})
alert(answer);

While the above will solve for the particular HTML/CSS you provided it makes a lot of assumptions about the page's HTML structure and CSS.

Is it possible that the problem you are attempting to address with JS could be resolved in a "cleaner" way by adjusting the HTML/CSS of your page?

If you are looking for a fool proof JS method to account for ALL the multitude of unique layouts/styles that exist now and may exist as more CSS3 display types are adopted in the future I believe you're out of luck. There is no recommendable, consistent, efficient way to do so.

Note: If this is more than just a theoretical discussion, consider being more specific about the exact scenario you are faced with as there is likely a vastly different approach that may resolve the issue.

Upvotes: 0

Matt Rohland
Matt Rohland

Reputation: 706

I might be misunderstand the question. In general, if the window height is less than the document height you will get a vertical scrollbar.

So in jQuery the check might look like this:

if( $(document).height() > $(window).height() ){ /* There will be a scrollbar */ }

You can perform this check within DOM changing and window resizing events to ascertain if a scrollbar has appeared. To preemptively determine if an event would cause a scrollbar to appear can be tricky and would likely require some understanding of the page and potential events to handle efficiently.

Upvotes: 2

Fergus In London
Fergus In London

Reputation: 1203

This is tagged through jQuery so I'm going to use jQuery; even though it's not mentioned in the question body.

a) It sounds like you want to get the height of the viewport (window); which can be retrieved like this:

var height = $(window).height();

If the height of the document (page) exceeds the height of the window, and there are no CSS properties blocking the display of scrollbars, then scrollbars will indeed by visible.

if( $(document).height() > $(window).height() )

b) This is going to be a bit trickier, in the sense the only way off the top of my head is to query every DOM element.. this is not a elegant solution; and in fact I'd ask you to reconsider your approach if you really you must do this. That said.. for curiosity...

If you're looking for the max height, in the sense of the largest element - then this would work:

// Get height of largest element.
var max_height = 0;

$('*').each( function(){
    // skip <html> and <body>
    if( ( $(this).get(0) == $('body').get(0) ) || ( $(this).get(0) == $('html').get(0) ) )
      return;

    var current_height = $(this).height();

    if( current_height > max_height )
      max_height = current_height;
});

For example, running that on this page...

> console.log( max_height );
570

However, I'm not sure if you want the maximum height of all combined elements.. In which case we obviously need to add all the elements up, but there's the obvious problem: elements are nested!

If this is what you want, then by using .children() we can just iterate through the lengths of the elements that are immediate children of your containing element/body.

// Get height of all combined elements
var combined_height = 0;

$('body').each( function(){  // replace with containing element?
    combined_height = combined_height + jQuery(this).height();
});

For example, running that on this page:

> console.log(combined_height);
2176

Upvotes: 1

Related Questions