How to retrieve the real height of a #div (including overflowed parts)

Question

The same way i use this to detect when user scolled down the whole page:

 $(window).scroll(function(){
    var diff = $(window).scrollTop() + $(window).height() - $(document).height();
    if  ($(window).scrollTop() == $(document).height() - $(window).height()   || (diff < 5 && diff > -5)){
           console.log('yay!');
    }
 });

I wanted to do the same inside a dialog,

I am trying like this:

$('#dialog').dialog();
$('#dialog').scroll(function(){
     var scroll = $('#dialog').scrollTop();
    var height = $('#dialog ul').outerHeight(true);
    if(scroll == height){
         $('#dialog').css('background','#999');
    }else{
        console.log('scrolltop is '+scroll+' and height is: '+height);
    }
})

DEMO:

http://jsfiddle.net/AgFXz/

The problem i guess is that i am not retrieving the whole #dialog size but the visible (CSS Defined property) size..

How can i know when user scrolled till the end of the dialog's scroll?

Thanks!!

Please don't tell me that i have to Do it counting the elements... — Toni Michel Caubet, Jun 18 '12 at 21:04
Seems to be the same as http://stackoverflow.com/questions/2522579/how-do-i-get-the-real-height-of-a-overflow-hidden-or-overflow-scroll-div — Smileek, Jun 18 '12 at 21:11

sachleen · Answer 1 · 2012-06-18T21:22:33.807

1

Use $('#dialog ul')[0].scrollHeight to get the scroll height of the element and then subtract the actual height $('#dialog ul').outerHeight(true); to know when the user has scrolled to the bottom.

var height = $('#dialog ul')[0].scrollHeight - $('#dialog ul').outerHeight(true);

DEMO

This is what the console log says (I click the down arrow each time)

scrolltop is 40 and height is: 250
scrolltop is 80 and height is: 250
scrolltop is 120 and height is: 250
scrolltop is 160 and height is: 250
scrolltop is 200 and height is: 250
scrolltop is 240 and height is: 250

At the end, both scroll and height are 250. This doesn't show in the log but if you check it manually you'll see.

$('#dialog').scrollTop();
250

edited Jun 18 '12 at 21:22

answered Jun 18 '12 at 21:12

sachleen

30,730
8
78
73

The demo is not working, detects height = 0. so the color is changed when user scrolls back to the top again – Toni Michel Caubet Jun 18 '12 at 21:16
This is what happens for me: Scroll around, no change. As soon as the scroll bar hits the bottom, color changes to `#999`. Is that not what you want? – sachleen Jun 18 '12 at 21:18
do you see a different height than 0 in the logs? sure is the right link? thanks (it is what i want, but it's not happening in the DEMO) – Toni Michel Caubet Jun 18 '12 at 21:18

score 1 · Accepted Answer · answered Jun 18 '12 at 21:14

1

Have you tried scrollHeight property?

https://developer.mozilla.org/en/DOM/element.scrollHeight

answered Jun 18 '12 at 21:14

Cristi Pufu

9,002
3
37
43

score 0 · Answer 3 · answered Jun 18 '12 at 21:20

As everyone noticed, you should use scrollHeight.
But there is another problem in your demo:

#dialog ul{
    height:150px;
}

And of course $('#dialog ul').outerHeight(true) and $('#dialog ul').innerHeight() and even $('#dialog ul')[0].scrollHeight will equal 150.

You need to check scrollHeight of overflowed element, so use $('#dialog')[0].scrollHeight

How to retrieve the real height of a #div (including overflowed parts)

3 Answers3