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

Posted by Toni Michel Caubet on Stack Overflow See other posts from Stack Overflow or by Toni Michel Caubet
Published on 2012-06-18T21:02:52Z Indexed on 2012/06/18 21:16 UTC
Read the original article Hit count: 160

Filed under:
|
|
|

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!!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery