Experiment – Limited Infinite Scrolling

I recently started looking into infinite scrolling. I was familiar with the concept and the execution didn’t seem that difficult. Naturally, most infinite scrolling options require you to load a few piece of content, and then load the new content through AJAX, meaning that the content is fed to the page when certain criteria is met by the user (usually reaching the end of the page).

However, the appearance of infinite scrolling has become popular in it’s own right, providing users with a smaller, less daunting page initially and then providing more and more content as and when the user wishes.

I started to think about this when someone at work wanted to achieve the infinite scrolling effect but with content that was already present on the page and, more importantly, couldn’t be drip-fed into it. At first I thought it was a complete waste of time, from a development perspective. However, having consulted with a user-experience specialist, it has its benefits. Firstly, if the list being used linked off to other content, the user would be able to deep link to the content regardless of the order of it on the page.

For example, if a user wanted to share number 12, it might not have been loaded yet via ajax. Where in this case the content is already there. Secondly, if the content you are loading is hidden when the page is loaded, most browsers won’t load it until it becomes visible. This negates a large part of the potential performance hit you would suffer by loading all the content at once. To see a full list of browsers that act in this way, W3C did a study:

http://www.w3.org/2009/03/image-display-none/results

Note: This is purely for appearance purposes. This is recreating the effect of infinite scrolling but has no enhancements in terms of performance. The way this script works is as follows:

• It finds every element matching the selector and checks whether the distance from the top of element to the top of the page is less than the viewport. If it isn’t it hides it. This means that only the elements in view for the user are visible to start with.

• When the user first scrolls to the bottom of the page (not far considering we just hid everything), it asks a few things:

$(window).scroll(function(){

// test if the user has reached the bottom and that there are still hidden elements
if ($doc.height()-$win.height()-$(this).scrollTop() == 0 && $('.scrollable-data:hidden').length > 0) {
// show the DATA_INCREMENT (5) next hidden data tags
$('.loading-element').show();

// Give the impression of loading by setting a timeout, then loading the next batch of items and then hiding the loading animation
setTimeout(
function() 
{
    $('.scrollable-data:hidden:lt('+DATA_INCREMENT+')').show();
    $('.loading-element').hide();
    }, 400);
}

});
            

You can edit the amount of items ‘loaded’ to the user each time by changing the DATA_INCREMENT variable. If your list is not the only thing on the page, you could just as easily update the initial filter function to just hide the first X amount of entries.

$('.scrollable-data').filter(function(index){
    return (index > YOUR_NUMBER);
}).hide();
            

EDIT: This initial approach doesn’t work on iPad or iPhone as the if statement to reach the bottom of the page was never actually getting met, well it WAS getting met however it seems that mobile safari doesn’t run any javascript WHILST the viewport is moving.

This means that unless you stop the scroll EXACTLY on the document height (no bouncy bottom thing) it would very UNLIKELY to equal the same heights.

The fix is simple; instead of equaling the same height, you check if it was equal or more. This way it would trigger even if it had been scrolled past

//Change
if ($doc.height()-$win.height()-$(this).scrollTop() == 0 && $('.scrollable-data:hidden').length > 0) {
//To
if ($win.scrollTop() + $win.height() >= $doc.height() && $('.scrollable-data:hidden').length > 0) {
            

View the example

Download the source code