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.
$('#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);
}
});
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();
}
});
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. |
If you need to reset the infinite scrolling mechanism (like if the user switches search criteria, section, whatever), simply call:
$('#results').infiniteScroll('reset');
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.