CODEWITHSUNDEEP
javascriptjquery
Parag Gajjar
Parag Gajjar

Reputation: 730

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?

Upvotes: 15

Views: 44003

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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');

Upvotes: 48

RinShan Kolayil
RinShan Kolayil

Reputation: 23

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

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

Upvotes: 0

Ankit
Ankit

Reputation: 6654

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.

Upvotes: 15

Related Questions