Infinite (Scrollable) Div without any plugin with Javascript/JQuery

Question

I tried to search it over SO and there are many question asked like this but non of them has the answer. I want to implement a Scrollable Div to load dynamic content without any plugin. I am implementing JQuery itself but do not want to add other plugin.

I know how to do this on whole document as most of the questions suggest

$(window).scroll(function() 
{
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) 
    {
    }
});

but now how can I implement this on a single div? So, that when I scroll my div at bottom then it loads content with ajax?

Answer 1

Try this:

  $('#yourdiv').bind('scroll', function(){
       if ($(this).scrollTop() +$(this).innerHeight()>= $(this)[0].scrollHeight)
                {
                    $('#result').append('Bottom of your div');
                }
  });