Parag Gajjar Parag Gajjar - 23 days ago 8
Javascript Question

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 dynamically changing. I want to have height on scroll event.
Here is the code:

$("#container").scroll(function(e) {
scrollAll();
});

function scrollAll(){
var elemHeight = $("#container").scrollHeight;
var scrollHeight = $("#scrollbars").scrollHeight;
var ratio = elemHeight / scrollHeight;

$("#outup").html( elemHeight +" and "+ scrollHeight +" ratio "+ ratio +" = "+ ($("#container").scrollTop()));
}


Issue: It throws
scrollHeight is undefined
error. What's wrong?

Answer

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;