Scrollheight Of An Element Gives Undefined Value

In an element I've given CSS overflow: scroll;. Now in jQuery I want to have it's original height (containing all child elements' height). Children under this element are dynamical

Solution 1:

There is no scrollHeight in jQuery - it's scrollTop():

var elemHeight = $("#container").scrollTop();
var scrollHeight = $("#scrollbars").scrollTop();

Alternatively if you want to use the native scrollHeight property, you need to access the DOM element in the jQuery object directly, like this:

var elemHeight = $("#container")[0].scrollHeight;
var scrollHeight = $("#scrollbars")[0].scrollHeight;

Or like this:

var elemHeight = $("#container").prop('scrollHeight');
var scrollHeight = $("#scrollbars").prop('scrollHeight');

Solution 2:

If you are using Jquery 1.6 or above, use prop to access the value.

$("#container").prop('scrollHeight')

Previous versions used to get the value from attr but not post 1.6.

Solution 3:

$('#div')['prevObject'][0]['scrollingElement'].scrollHeight;

Try to print console.log($('#div') which returns all properties related to that div or any HTML element