A jQuery plugin that provides a basic mechanism for triggering more results to be loaded when the bottom of the page is reached.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
jquery.infinitescroll.js
jquery.infinitescroll.min.js

README.md

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

Copyright (c) 2010 DIY Co

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.