Create a Dynamic Scrolling Content Box Using AJAX

Posted in AJAX jQuery

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.
Google Reader loading more items

Dzone also implements this technique to show items as you scroll down the list.
Dzone dynamic scrolling 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

<div id="container">
	<div id="scrollbox" >
		<div id="content" >
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
	<p><span id="status" ></span></p>

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.

	margin:0px auto; 
	padding:40px 0; 
	overflow:auto; overflow-x:hidden; 
#container > p{ 
	font-family:Arial, sans-serif; font-size:0.75em; 
	padding:5px; margin:0; 

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.
Dynamic Scrolling Content Box

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.

function updatestatus(){
	//Show number of loaded items
	var totalItems=$('#content p').length;
	$('#status').text('Loaded '+totalItems+' Items');
function scrollalert(){
	var scrolltop=$('#scrollbox').attr('scrollTop');
	var scrollheight=$('#scrollbox').attr('scrollHeight');
	var windowheight=$('#scrollbox').attr('clientHeight');
	var scrolloffset=20;
		//fetch new items
		$('#status').text('Loading more items...');
		$.get('new-items.html', '', function(newitems){
	setTimeout('scrollalert();', 1500);

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



Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

20 Responses (Add Your Comment)

  1. Nice Ajax innovation Satbir……. keep the gud work up

  2. Tom Willis says:

    Perfect, this is exactly what I needed and probably the cleanest of the all the implementations I came across while googling.

    Thanks a LOT

  3. HI. Great script. Can you tell me how I can replace the contents with new information rather than appending it.

  4. Shekar says:

    Excellent work. It helped me a lot.

  5. Shekar says:

    And also it would be really good if we can select the items on up/down arrow keys press, some thing like list box. I am trying for this, will post if found some thing use full.

  6. Marco says:

    Hi, I would like to do exactly the same but horizontally, im not very good in css and haven’t been able to do it myself. Can you please post the css to do it horizontally?

Comments are closed for this post.