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

Question

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 1

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).