Question

Suppose I have div and I want to fetch data and push data into that div. When the user scrolls within the div, the next set of data will be fetched and pushed into the div. How do I detect scroll bar position with jQuery? I don’t want to use any plugin. I need jQuery code. Here is the sample link like ahttp://www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html but it used a plugin.

Answer 1

How about something along the lines of:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       var new_div = '<div class="new_block"></div>';
       $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});

This will append a new element to the main page container when the scrollbar reaches the bottom of the page. It also fills this new element with content loaded from an external script.

---

If you want to detect whether a user has scrolled to the bottom a specific div:

$('.some_element').bind('scroll', function(){
   if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
      var new_div = '<div class="new_block"></div>';
      $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});