evolutionScrollable jQuery Plugin

jQuery.fn.evolutionScrollable

This plugin enhances an target to support endless scrolling through asynchronously-appended content. When the target's nearest scrollable wrapper (either an overflowing target or the window) scrolls near its end, additional content is requested and rendered within the target. Additionally, the plugin supports pre-filling the target to fill its wrapper, batching scrolled pages to require explicit "view more" interaction to load further pages, indicating loading, including "return to top" links, and compensating for the dimensions of static content surrounding and offsetting scrollable content within its wrapper.

Usage

$(target).evolutionScrollable(options)

Where target is the target that should be appended to.

Typical usage:

$(target).evolutionScrollable({
    load: function(pageIndex) {
        return $.telligent.evolution.get({
            url: callbackUrl
            data: {
                pageIndex: pageIndex
            }
        });
    }
});

Options

load: Function called when content is loaded. Passed a page index to load. Must return a promise that resolves with content (string, DOM, or jQuery selection) to append to the targeted target. If the promise fails or resolves with empty content, the scrollable prevents further loading. If the caller needs to perform its own, manual, appending of content instead of relying on evolutionScrollable to append the result of the promise, it can perform its own appending within this callback and then resolve with a boolean value of true to still allow the paging to continue.
wrapper: Optional scrollable wrapper element in which to detect scroll progress. When not passed, nearest scrollable wrapper (including the target, an ancestor, or the window) is determined. It's not usually necessary to pass this.
target: Optional target element to append items too. Usually assumed to be the jQuery selection. default: jQuery selection
initialPageIndex: Initial page index. default: 0
prefill: Pages to attempt to load to pre-fill the target with content if it does not already fill its wrapper. default: 10
batch: Number of pages to load before displaying a view more indicator requring interaction to load another batch of pages. When 0, will never require interaction. default: 10
animationDuration: Animation duration on scrolls and reveals of indicators and buttons. default: 250

Methods

reset

Resets the scrollable, emptying its content, re-initing its page index and pre-filling its content.

$(target).evolutionScrollable('reset');

loadMoreVisible

Expicitly set whether the Load More action is displayed. Normally, this is automatically shown or hidden when a batch of pages is used, but it can also be excplitily hidden when it's known that no further pages would be available upon selection.

$(target).evolutionScrollable('loadMoreVisible', bool);

Recommended