Infinite Scroll

This shortcut requires the jQuery build of Waypoints.

First, include the shortcut script after the main Waypoints script.

<script src="/path/to/lib/jquery.waypoints.min.js"></script>
<script src="/path/to/shortcuts/infinite.min.js"></script>

The Infinite Scroll shortcut transforms a traditional "Next Page" navigation into an AJAX-powered infinite scrolling UI pattern. To create it, instantiate the Waypoint.Infinite class.

var infinite = new Waypoint.Infinite({
  element: $('.infinite-container')[0]
})

The element option for Infinite referes to the container around all infinite items that will be used as the waypoint and fetched items will be appended to.

The above example uses all of the default options. You can override those options or apply the necessary classes to your existing markup. Default markup would look like this:

<div class="infinite-container">
  <div class="infinite-item">...</div>
  <div class="infinite-item">...</div>
  <div class="infinite-item">...</div>
  ...
</div>
<a class="infinite-more-link" href="/next/page">More</a>

container

Default: 'auto'.

Newly loaded items are appended to the container. The default value of 'auto' means the container will be the same element as the element option. The element option, in congruence with the offset option, make up the waypoint that triggers the next page to load.

items

Default: '.infinite-item'.

This is a selector string that should match the individual items that will be pulled out of each page and appended to the item container.

loadingClass

Default: 'infinite-loading'.

This string is a class name that is added to the container while items are loading, and removed once they are appended.

Default: '.infinite-more-link'.

This string selector should match the "Next Page" element on every page. Infinite will know to stop loading more pages when an AJAX request no longer includes this "More" link (indicating you're on the final page.)

offset

Default: 'bottom-in-view'.

This is the same offset option from a regular Waypoint, except the default is now 'bottom-in-view' instead of 0. This means, by default, new items will be loaded when the bottom of the container comes into view.

onBeforePageLoad

Default: $.noop.

This is a callback that will fire as soon as the waypoint is reached, before the request for new items has been made.

onAfterPageLoad

Default: $.noop.

Parameters: $items.

This is a callback that will fire at the end of the request cycle, after new items have been appended to the container. It is passed one parameter, which is a jQuery object of all the items that were appended during the page load.