Create a Dynamic Scrolling Content Box Using AJAX

If you have used Google Reader, then you might have noticed the way Google Reader shows feed items, it loads up few items first when you click on a feed and as you scroll down to view more items, it fetches more items dynamically and adds it to the list.

Dzone also implements this technique to show items as you scroll down the list.

Similarly, Facebook has also started using this technique to load more posts in user’s home page as you scroll down.
Today, I am going to create a similar dynamic content box that loads more content dynamically as user scrolls to the bottom of the box.
View Working Demo

The HTML Structure

1. <div id="container">  
2.     <div id="scrollbox" >  
3.         <div id="content" >  
4.             <p>Lorem ipsum dolor sit amet</p>  
5.             <p>Ipsum lorem dolor amet sit</p>  
6.             <p>Dolor lorem ipsum amet tis</p>  
7.             <p>Lorem ipsum dolor sit amet</p>  
8.             <p>Ipsum lorem dolor amet sit</p>  
9.             <p>Dolor lorem ipsum amet tis</p>  
10.             <p>Lorem ipsum dolor sit amet</p>  
11.             <p>Ipsum lorem dolor amet sit</p>  
12.             <p>Dolor lorem ipsum amet tis</p>  
13.         </div>  
14.     </div>  
15.     <p><span id="status" ></span></p>  
16. </div>  

The scrollbox div is the one that has fixed width and height and houses the content div that stores the content. The status span is used to display number of loaded items or the status message of loading more items.

The CSS Styles

The height and width of scrolling div is fixed using CSS and its overflow property is set to auto so that it gets a scrollbar when content exceeds the height or width. But to prevent horizontal scrolling, i added overflow-x:hidden attribute so that scrolling only occurs up or down.

1. #container{  
2.     width:400px;  
3.     margin:0px auto;  
4.     padding:40px 0;  
5. }  
6. #scrollbox{  
7.     width:400px;  
8.     height:300px;  
9.     overflow:auto; overflow-x:hidden;  
10. }  
11. #container > p{  
12.     background:#eee;  
13.     color:#666;  
14.     font-family:Arial, sans-serif; font-size:0.75em;  
15.     padding:5px; margin:0;  
16.     text-align:rightright;  
17. }  

The Concept

Now to load more content on scroll, you will need to understand the concept behind the JavaScript code given below. To start with, i will be using, three attributes of DOM objects namely, scrollHeight, clientHeight and scrollTop. scrollHeight is the actual height of the inner content of a box, i.e. the actual height of content in the scrollbox container in our case. clientHeight specifies the height of the viewport container i.e. height of the visible region which is the height of scrollbox div in our case.
The scrollTop is the distance in pixels the content which has moved up.
Here is an illustraton specifying these properties.

When the scrollTop becomes equal to scrollHeight-clientHeight, then the scroll bar has reached its bottom position, so this is the point when we need to fetch new items. To make the scrolling box more useful, i added another value called scrolloffset, which keeps track of the fact that how many pixels before the bottom the scroll bar is, so that we can start fetching new items instead of the user scrolling to the bottom and then waiting for content to load.

The JavaScript Code

Here’s the JavaScript code you will need. As always, you will need to include the latest jQuery library into your page header before this code.

1. $('document').ready(function(){  
2.     updatestatus();  
3.     scrollalert();  
4. });  
5. function updatestatus(){  
6.     //Show number of loaded items  
7.     var totalItems=$('#content p').length;  
8.     $('#status').text('Loaded '+totalItems+' Items');  
9. }  
10. function scrollalert(){  
11.     var scrolltop=$('#scrollbox').attr('scrollTop');  
12.     var scrollheight=$('#scrollbox').attr('scrollHeight');  
13.     var windowheight=$('#scrollbox').attr('clientHeight');  
14.     var scrolloffset=20;  
15.     if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))  
16.     {  
17.         //fetch new items  
18.         $('#status').text('Loading more items...');  
19.         $.get('new-items.html', '', function(newitems){  
20.             $('#content').append(newitems);  
21.             updatestatus();  
22.         });  
23.     }  
24.     setTimeout('scrollalert();', 1500);  
25. }  

Code Explanation: The updatestatus() function counts the number of items loaded into the content and displays it in the status span. The scrollalert function checks the current scrollTop position of the scrollbox div and if the scroll bar is near the bottom area, new items are fetched using AJAX.
Here i am using new-items.html that simply displays some items for the content box as this is just a demo. In actual application, you might employ some server side script that will load next items from the result set.
The content obtained via AJAX is then appended to the content div and updatestatus() is called to update the status message. setTimeout is used so that position of the scroll bar is checked periodically and if it matches condition, then new items should be fetched.
So, there you are with a dynamic content box just like Google Reader or DZone.
View Working Demo or Download Source Code n Try
Enjoy!