If you don't already know, endless scroll (or endless pagination, or infinite scrolling) is a popular technique among web 2.0 sites such as Google Reader and Live Image Search, where instead of paging through items using the traditional pagination technique, the page just keeps loading with new items attached to the end.
There are a few options to customise the behaviour of this plugin:
| Option | Type | Description |
| bottomPixels | Integer | The number of pixels from the bottom of the page that triggers the event. |
| fireOnce | Boolean | Only fire once until the execution of the current event is completed. |
| fireDelay | Integer | Delays the subsequent firing, in milliseconds, 0 or false to disable delay. |
| loader | String | The HTML to be displayed during loading. |
| data | String or Function | Plain HTML data, can be either a string or a function that returns a string, when passed as a function it accepts one argument: fire sequence (the number of times the event triggered during the current page session). |
| insertAfter | String | jQuery selector syntax: where to put the loader as well as the plain HTML data. |
| callback | Function | Callback function, accepts one argument: fireSequence (the number of times the event triggered during the current page session). |
| resetCounter | Function | Resets the fire sequence counter if the function returns true, this function could also perform hook actions since it is applied at the start of the event. |
| ceaseFire | Function | Stops the event (no more endless scrolling) if the function returns true, accepts one argument: fireSequence. |
| intervalFrequency | Integer | Set the frequency of the scroll event checking, the larger the frequency number, the less memory it consumes - but also the less sensitive the event trigger becomes. |
In a typical scenario, you won't be using the data option, but rather the callback option. You may use it to trigger an AJAX call and updates/inserts your page content.
// using default options
$(window).endlessScroll();
// using some custom options
$(window).endlessScroll({
fireOnce: false,
fireDelay: false,
loader: '<div class="loading"><div>',
callback: function(p){
alert("test");
}
});You may customise the look and feel of the loader by changing:
- The
endless_scroll_loaderclass; - Or the
endless_scroll_loader_<scroller_dom_html_id>.
All modern browsers (Firefox, Chrome, Safari, Opera, IE7+) should be supported. Please open an issue if Endless Scroll doesn't work on a particular browser.
v1.5.1 [2012-03-08]
- Added
fireSequenceargument toceaseFire. - Added a
ceaseFireexample to the demo page. - Fixed
loader.
v1.5.0 [2012-03-08]
- Added
intervalFrequencyoption. - Endless Scroll should now consume less memory in most situations.
v1.4.8 [2011-11-18]
- Refactored default options merge to avert side effects.
v1.4.7 [2011-11-08]
- Compatibility fix for IE7 and IE8.
v1.4.6 [2011-10-26]
- Fixed an issue with inner_wrap and the first scroll event.
v1.4.5 [2011-09-25]
ceaseFirenow works as expected during ascrollevent.
v1.4.4 [2011-06-28]
- The AJAX loader should be removed when there's no more results to load.
v1.4.3 [2011-06-28]
- The
dataoption now accepts a fireSequence argument too.
v1.4.2 [2011-01-08]
- Fixed a bug where calling the script on
$(document)would fail.
v1.4.1 [2010-06-18]
- Fixed a bug where the callback fires when the inner wrap hasn't been created.
v1.4 [2010-06-18]
- Endless Scroll now works with any elements, not just
$(document)!
v1.3 [2009-04-20]
- Fixed a bug caused by
fireDelay.
v1.2 [2009-01-16]
- Added
resetCounteroption.
v1.1 [2009-01-15]
- Added
fireDelayoption.
v1.0 [2009-01-15]
- Initial release.
Check out my other jQuery plugins:
- Inline Confirmation - One of the less obtrusive ways of implementing confirmation dialogues.
- Slideshow Lite - An extremely lightweight slideshow plugin for jQuery.
Copyright (c) 2008-2012 Fred Wu
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent