Infinite Scrolling

Dynamic content pages become scroll magical.

An infinite-content page can be achieved by adding a scene that triggers at the bottom of the page.

  1. On Scene start enter loading state. Save the state to prevent multiple triggers. In this example the class of the #loader element is used.
  2. Make ajax call to load additional content (if not already in loading state).
  3. When receiving the ajax "load" event, add the content to your container, update the scene and revert to original state.

The demo below doesn't really use ajax to ensure offline compatibility. Instead it uses a function to immitate an ajax call to add content.

view source
LOADING...