scrollheight of an element gives undefined value

Question

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?

Rory McCrossan · Accepted Answer · 2021-07-29T07:40:45.557

45

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

edited Jul 29 '21 at 07:40

answered Feb 22 '12 at 09:27

Rory McCrossan

331,213
40
305
339

I've gone through, http://stackoverflow.com/questions/8100099/checking-for-scrollheight-of-an-element-sometimes-returning-0 – Parag Gajjar Feb 22 '12 at 09:28
Great its working now, can you let me know what is the difference in $("#container")[0] and $("#container"). – Parag Gajjar Feb 22 '12 at 09:32
7

`$("#container")` returns the element wrapped in a jQuery object, `$("#container")[0]` returns the DOM element itself. – Rory McCrossan Feb 22 '12 at 09:34

score 15 · Answer 2 · answered Jun 04 '12 at 14:19

15

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.

answered Jun 04 '12 at 14:19

Ankit

6,388
8
54
79

score 0 · Answer 3 · answered Jun 10 '19 at 14:19

0

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

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

answered Jun 10 '19 at 14:19

RinShan Kolayil

23
2
7

scrollheight of an element gives undefined value

3 Answers3

Linked