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.

infinite-lorem-ipsum.html

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:

WordPress.com Logo

You are commenting using your WordPress.com 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