Question

I want to implement Facebook like automatic content loading on scrolling in my webpages,how can we easily achieve this?Is there any jquery plugins for this?

Answer 1

This is fairly easy. First off, you have to note when the element is scrolled to its end. In case of the FB sidebar ticker, or the page as a whole, you will see that when it is scrolled to its end, a loading GIF image is displayed while data is being fetched by AJAX, after which the data is displayed and the GIF image being pushed out of view. To note the moment when the user has scrolled to the bottom, you can do something like :

$(element).bind('scroll',function() {
   if ($(this).outerHeight() + $(this).scrollTop() >= $(this).get(0).scrollHeight) {
   //unbind the 'scroll' event until the data is fetched and displayed
   $(this).unbind('scroll');
   //ajax call to fetch data, display it, and finally rebind the 'scroll' event as a callback function
   }
  });