jQuery Infinite Scroll

A lightweight (1kb) jQuery plugin that provides a basic mechanism for triggering more results to be loaded when the bottom of the page is reached. It's simple and designed not to get in the way. In addition to working on all major browsers, it supports iScroll (for scrolling content on iOS devices).

See it in action! — "Explore" on DIY.

Usage

$('#results').infiniteScroll({
	threshold: 800,
	onEnd: function() {
		console.log('No more results!');
	},
	onBottom: function(callback) {
		console.log('At the end of the page. Loading more!');
		
		// (load results & update views)
		var moreResults = true;
		
		callback(moreResults);
	}
});

Using with iScroll

Mobile Webkit doesn't support scrolling of content in fixed width/height elements. To fix this, there's iScroll—a well-crafted library that emulates how it should work (and also has some other niceties). Using iScroll in conjunction with this infinite scroll plugin is super easy; just set the iScroll option to the iScroll instance.

var scroller = new iScroll('results', {
	desktopCompatibility: true,
	hScrollbar: false,
	vScrollbar: false,
	snap: 'li',
	momentum: false
});

$('#results').infiniteScroll({
	iScroll: scroller,
	onBottom: function(callback) {
		console.log('At the end of the page. Loading more!');
		callback();
	}
});

Options

Option	Type	Default	Description
threshold	`int`	`500`	When the user scrolls to this many pixels from the bottom, `loadMore` is called.
onEnd	`function()`	`null`	Invoked when no more results are available (i.e. when `false` is passed to the callback provided to the `onBottom` method).
onBottom	`function(callback)`	`null`	(required) Invoked when the user reaches the end of the page. When you're done loading more results / updating views, invoke `callback()` with one argument: a bool representing whether there are more results available. If no argument is provided, the plugin assumes there are more results.
iScroll	`instance`	`null`	An iScroll instance that you wish to add infinite scrolling to.

Reset

If you need to reset the infinite scrolling mechanism (like if the user switches search criteria, section, whatever), simply call:

$('#results').infiniteScroll('reset');

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.