How do I get the height of a div's full content with jQuery?

jquery scroll height
mtlca401 picture mtlca401 · Jul 28, 2011 · Viewed 132k times · Source

I am trying to create my own scroll bars. I have tried most of the jquery scrollbar plugins and none of them seem to work for me, so I decided to create my own. I have an overflow area with scrollable content. I can get the scrollbar to work if I am able to figure out the height of the scrollable content area. I have tried .scrollHeight() and the browser doesn't even recognize it. The overflow area has a fixed position.

Answer

mu is too short picture mu is too short · Jul 28, 2011

scrollHeight is a property of a DOM object, not a function:

Height of the scroll view of an element; it includes the element padding but not its margin.

Given this:

<div id="x" style="height: 100px; overflow: hidden;">
    <div style="height: 200px;">
        pancakes
    </div>
</div>

This yields 200:

$('#x')[0].scrollHeight

For example: http://jsfiddle.net/ambiguous/u69kQ/2/ (run with the JavaScript console open).

Related questions

jQuery scroll to element

I have this input element: <input type="text" class="textfield" value="" id="subject" name="subject"> Then I have some other elements, like other text inputs, textareas, etc. When the user clicks on that input with #subject, the page …

Read More
Smooth scrolling when clicking an anchor link

I have a couple of hyperlinks on my page. A FAQ that users will read when they visit my help section. Using Anchor links, I can make the page scroll towards the anchor and guide the users there. Is there …

Read More
How to disable scrolling temporarily?

I'm using the scrollTo jQuery plugin and would like to know if it is somehow possible to temporarily disable scrolling on the window element through Javascript? The reason I'd like to disable scrolling is that when you scroll while scrollTo …

Read More