Endless Scrolling List Using jQuery

The mobile site for Pinterest got me all excited about endless scrolling list. This makes sense for mobile sites where we need to minimize user input. It turns out that the behavior is quite easy to implement using jQuery.

Our goal is to fetch new data and add to the list just before the user is about to scroll to the very bottom of the list.

The amount of the document that is left to be shown below the window frame is:

$(document).height() - $(window).scrollTop() - $(window).height()

When this amount reaches a minimum value, say 100 pixels, we can begin to fetch additional data and add items to the list.

Let’s create a test application. First, we need an element for the list where we will add items.

<div id="list_area"></div>

Attach a scroll event handler for the window.

$(function() {
 $(window).scroll(function () { 
  if ($(document).height() -
   $(window).scrollTop() - 
   $(window).height() <= 100) {
   console.log("Time to add content");

Example implementation of addContent().

var i = 0;
function addContent() {
 var div = $("#list_area");
 for (var j = 0; j < 50; ++j, ++i) {
   div.append($("<p>", {"text": "Paragraph " + i}));

One thought on “Endless Scrolling List Using jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s