If you don't already know, endless scrolling (or infinite scrolling or pagination) is a popular technique amongst modern websites such as Google Reader and Live Image Search, whereby instead of paging through items using traditional pagination links, the page just keeps loading with new items attached to the end.
Endless Scroll not only helps you build highly customisable infinite scrolling effects, it also offers features not commonly seen. Such features include:
There are a few options to customise the behaviour of this plugin:
Option | Type | Description |
pagesToKeep | Integer | The number of 'pages' to keep before either end of the scrolling content are discarded, by default (value set to `null`) no content will be discarded. |
inflowPixels | Integer | The number of pixels from the boundary of the element 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. |
content | String or Function | Plain HTML content to insert after each call, can be either a string or a function that returns a string, when passed as a function it accepts three arguments:
|
insertBefore | String | jQuery selector syntax: where to put the loader as well as the plain HTML data. |
insertAfter | String | jQuery selector syntax: where to put the loader as well as the plain HTML data. |
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. |
ceaseFireOnEmpty | Boolean | Ceases fire automatically when the content is empty, set it to `false` if you are using `callback` instead of `content` for loading content. |
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. |
callback | Function | Callback function, accepts three arguments:
|
ceaseFire | Function | Stops the event (no more endless scrolling) if the function returns true, accepts three arguments:
|
// using default options
$(window).endlessScroll();
// using some custom options
$("#images").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:
.endless_scroll_loader
(class, for all Endless Scroll loaders);#endless_scroll_loader_<scroller_dom_html_id>
(id, for the specific loader).The most recently loaded content is wrapped in #endless_scroll_content_current
.
Endless Scroll, starting from v1.6.0 is written in CoffeeScript. To contribute and/or modify the source code, please edit src/jquery.endless-scroll.coffee
and recompile the JavaScript. To include Endless Scroll in your webpage, please use the compiled js/jquery.endless-scroll.js
.
The command for automatically compiling to JavaScript is:
coffee -w -b -o js/ -c src/
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.8.0 [2012-04-17]
ceaseFireOnEmpty
.pagesToKeep
.$(window)
uses.v1.7.1 [2012-04-16]
scrollDirection
to the callback arguments.v1.7.0 [2012-04-16]
bottomPixels
option to inflowPixels
.insertBefore
option.pageSequence
to the callback arguments.#endless_scroll_content_current
wrapper.v1.6.0 [2012-04-15]
data
option to content
.v1.5.1 [2012-03-08]
fireSequence
argument to ceaseFire
.ceaseFire
example to the demo page.loader
.v1.5.0 [2012-03-08]
intervalFrequency
option.v1.4.8 [2011-11-18]
v1.4.7 [2011-11-08]
v1.4.6 [2011-10-26]
v1.4.5 [2011-09-25]
ceaseFire
now works as expected during a scroll
event.v1.4.4 [2011-06-28]
v1.4.3 [2011-06-28]
data
option now accepts a fireSequence argument too.v1.4.2 [2011-01-08]
$(document)
would fail.v1.4.1 [2010-06-18]
v1.4 [2010-06-18]
$(document)
!v1.3 [2009-04-20]
fireDelay
.v1.2 [2009-01-16]
resetCounter
option.v1.1 [2009-01-15]
fireDelay
option.v1.0 [2009-01-15]
Check out my other jQuery plugins:
Copyright (c) 2008-2012 Fred Wu