A lightweight implementation of the infinite scroll mechanic. By providing two essential callbacks, loadMore and doneLoading, the jQuery Infinite Scroll Helper plugin makes it a breeze to add infinite scrolling functionality to your page.
npm install jquery-infinite-scroll-helperjQuery Infinite Scroll Helper
=============================
A lightweight implementation of the infinite scroll mechanic. By providing two essential callbacks, loadMore and doneLoading, the jQuery Infinite Scroll Helper plugin makes it a breeze to add infinite scrolling functionality to your page.
Options
-------
loadMore callback should be invoked. The default is 0.true or false, signaling whether loading has completed. This callback is passed a pageCount argument.true. The default is 300.loadMore has been invoked. The default is loading.loadingClass option.* pageCount: The page number to loaded. This can be helpful when making requests to endpoints that require a page number.
* done: A callback function that should be called when loading has completed. This is an alternative way to signal that you are done loading instead of defining the doneLoading callback.
loadMore callback is invoked. The default is 1.loadMore callback. This can be set to true if, for instance, you need to load the initial content asynchronously on page load.
Methods
-------
$(selector).infiniteScrollHelper('destroy');
Usage
------
$('#my-element-to-watch').infiniteScrollHelper({
loadMore: function(page) {
// load some data, parse some data
},
doneLoading: function() {
// return true if you are done doing your thing, false otherwise
return false;
}
});
or when using the done argument instead of the doneLoading callback
$('#my-element-to-watch').infiniteScrollHelper({
loadMore: function(page, done) {
// you should use the page argument to either select an anchor/href and load
// the contents of that url or make a call to an API that accepts a page number
var nextPageUrl = $('.pagination a').eq(page - 1).attr('href');
$.get(nextPageUrl, function(data) {
$(data).find('.items').appendTo('#my-element-to-watch');
// call the done callback to let the plugin know you are done loading
done();
});
// or an API perhaps
$.getJSON('http://myawesomeapi.com/data?p=' + page, function(data) {
// parse json data and create new html then append
done();
});
}
});
The plugin can also be instantiated using constructor invocation
new InfiniteScrollHelper($('#my-element-to-watch')[0], options);
#### IE6/7 Note ####
There will most likely be an issue with the scroll offset calculation when calling the plugin direclty on an element that is set to overflow: scroll-y in IE 6 & 7. In this case, it is best to wrap the children of the element in a container and call the plugin on this container instead.
Dependencies
------------
* jQuery 1.7.0+
Changelog
---------
scrollContainer option.loadMore callback when the window was scrolled past y0.loadMoreDelay option. This allows you to set a delay before the loadMore callback is invoked.done argument is now passed to the loadMore callback. You can invoke this callback to signal that you are done loading content instead of defining the doneLoading callback option.debounceInt option. The plugin now uses debouncing for the scroll event. You can specify the interval if you want it to be different than the default 100ms.loadingClassTarget option.startingPageCount option.triggerInitialLoad option.doneLoading callback now receives pageCount as a parameter.License
-------
Copyright (c) 2014 Expand The Room, LLC
Licensed under the MIT license.