InfiniteScroll

function

InfiniteScroll()

Option name	Type	Description
selector	string_or_domelement_or_jqueryobject	A selector string, DOM element, or jQuery object containing content that will be updated asynchronously
paginationSelector	string_or_domelement_or_jqueryobject	A selector string, DOM element, or jQuery object containing the content pagination
options	object	An object containing required options for this instance nextSelector {string: ".next"} The selector string to use to locate the 'next page' link within the paginationSelector loadButtonSelector {string: ""} The selector string to use to locate the 'load more' button, if this functionality is required alwaysButtonTrigger {boolean: false} Requires the option 'loadButtonSelector' to be defined. If true, loads will only ever occur when the user presses the next button. If false, the button will be hidden after first click, and all content loads thereafter will be triggered by scrolling loadingCopy {string: "Loading..."} Defines the copy shown while a content load is in progress loadCompleteCopy {string: "All items loaded"} Defines the copy shown when there is no more content to load scrollSelector {string_or_domelement_or_jqueryobject: window} Specifies where the application should listen for scroll events from. Defaults to window, but can be any scrollable element (even matching the 'selector' argument) scrollTrigger {number: 100} The distance from the bottom of the scrollable element that has to be reached before a new content load begins

Dependencies:

NATION.Utils
NATION.EventDispatcher

About:

Loads content asynchronously and appends it to the bottom of the existing content.

Can work with the main browser scrollbar, but can also work within scrollable elements (with overflow:scroll).

Can load content based on scrolling, or on the press of a 'load more' button.

Example code:

        <!-- HTML -->
        <section class="scrollable-content">
            <div class="article-list">
                <article>
                    <h1>Article 1</h1>
                </article>
                <article>
                    <h1>Article 2</h1>
                </article>
                <article>
                    <h1>Article 3</h1>
                </article>
            </div>
            <ul class="pagination">
                <li><a href="/?page=2" class="js-next">Next page</a></li>
            </ul>
        </section>

        // JavaScript
        var selector = ".article-list";
        var paginationSelector = ".pagination";
        var options = {
            loadingCopy: "Loading content...",
            loadCompleteCopy: "All content loaded"
        };
        var infiniteScroll = new NATION.InfiniteScroll(selector, paginationSelector, options);

LOADED

property

InfiniteScroll.prototype.LOADED

Event that fires when a new set of content has finished loading

ALL_LOADED

property

InfiniteScroll.prototype.ALL_LOADED

Event that fires when there is no more content to load

FIRST_LOAD

property

InfiniteScroll.prototype.FIRST_LOAD

Event that fires when the first set of additional content is loaded. Useful if your application/website needs to change UI once an infinite scroll has been initiated

LOAD_STARTED

property

InfiniteScroll.prototype.LOAD_STARTED

Event that fires when a new load request has just been sent to the server

CONTENT_READY

property

InfiniteScroll.prototype.CONTENT_READY

Event that fires when a new set of content has been prepared and is ready to be inserted into the DOM

getLoadedItems

method

InfiniteScroll.prototype.getLoadedItems() ->nodelist

Option name	Type	Description
previousLoadOnly	boolean	If true, this will only return items from the previous load. This will return an Array, rather than a NodeList.
return	nodelist

Returns a NodeList of all items added in all previous loads

reset

method

InfiniteScroll.prototype.reset()

Re-fetches the next URL from the pagination as it currently exists and updates all selectors

This is useful if you wish to re-use the same container for a whole new set of content/pagination