Infinite Scrolling

Among the more recent diseases of web design are the so-called infinite-scroll pages; websites that (apparently) have no end so you can continue scrolling down until you get frustrated and give up. (Lately, there has been a nice xkcd comic about those pages, too.)

While – with a few notable exceptions like, say, picture results in search engines – personally, I think these pages are just another annoyance to the web user, I was still interested how they could be implemented. Not very surprisingly, a quick web search came up with many suggestions for libraries and plug-ins but little explanation what is going on at the lower level. Somewhat more surprisingly, I could not even find a complete minimal working example. After some more searching, I found I was quickly able to write my own which is now available here for sharing.


This document will just present an infinite random Lorem Ipsum text that is generated dynamically (pure client-side logic) as the user scrolls down the page. Normally, one would want to fetch more content from a server which would involve making some connection, asking for the i-th portion of the site and parsing the output. Applying these changes to my example would only require changing the getNextItem function. The code (HTML + JavaScript + CSS) is all included into one single file for convenience. It will not work at all without JavaScript, which I guess is probably impossible to achieve.


Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s