jQuery onScrollBeyond and scrollExtend plugins
| Download |
| Download as .zip |
| Demo |
| View Demo |
The scrollExtend plugin is designed to automatically load new content at the bottom of the screen (by appending to a DOM element) when the user scrolls beyond the element, much like Facebook does with their status updates. The existing infinite scroll plugin was primarily designed to integrate with Wordpress, which didn’t really suit my purposes.
There are two plugins encapsulated here – onScrollBeyond, which allows the developer to specify a callback to be run when an element is scrolled beyond (or the end of the document is reached), and scrollExtend, which is simply an implementation of onScrollBeyond that automatically loads new content via ajax when a user scrolls past an element.
Works with jQuery 1.3.2 and jQuery 1.4.2
Tested in IE6, IE7, Firefox, Chrome, Safari
Originally created for the Junebug dating site
Update v1.0.1 – fixed scrollExtend would get stuck in a disabled state if beforeStart returned false, even if it returned true on subsequent calls
onScrollBeyond Options
| buffer (default: 20) |
| The number of pixels below the element that need to be scrolled beyond in order for the event to fire. For example, setting this to zero means that as soon as the bottom of the element can be seen in the window, the callback will fire. |
| fireOnBeyondElement (default: true) |
| Whether or not to fire the callback event when the element is scrolled beyond. The alternative is to fire the event only if the very end of the document has been reached (i.e. the user’s scrollbar cannot go any farther down). |
| fireOnDocEnd (default: true) |
| If true, the callback event will fire if the user scrolls to the very bottom of the window. Note that if your buffer is greater than zero and your scollBeyond element is the last element on the page, the callback won’t fire unless this is set to true. |
onScrollBeyond API
| disable |
| disable the onScrollBeyond for an element by calling jQuery(‘#my_element’).onScrollBeyond(‘disable’) |
| enable |
| enable the onScrollBeyond for an element (if it has been disabled) by calling jQuery(‘#my_element’).onScrollBeyond(‘enable’) |
onScrollBeyond Example
jQuery(document).ready(
function() {
jQuery('div.mydiv').onScrollBeyond(
function() {
alert( 'you have scrolled beyond this element' );
}
);
}
);
scrollExtend Options
| buffer (default: 20) |
| (this option is passed directly to onScrollBeyond. See description above) |
| fireOnBeyondElement (default: true) |
| (this option is passed directly to onScrollBeyond. See description above) |
| fireOnDocEnd (default: true) |
| (this option is passed directly to onScrollBeyond. See description above) |
| url |
| The url that will be loaded via AJAX when a user scrolls beyond the element or hits the end of the page |
| beforeStart |
| a callback to be run prior to firing the onScrollBeyond event. Note that this callback MUST RETURN TRUE if you want the event to fire. If this callback returns false, the scroll event will not fire |
| onSuccess |
| a callback to be run after the new element has been loaded & appended |
| target |
| specifies which element we should append our newly created element to. Accepts any valid jQuery selector. |
| loadingIndicatorEnabled (default:true) |
| if true, when content is being loaded, a loading indicator element is added to the target. |
| loadingIndicatorClass (default: ’scrollExtend-loading’) |
| Class to be applied to the loading indicator |
| newElementClass |
| Class to be applied to the newly created element |
| ajaxSettings |
|
options to be passed directly to jQuery.ajax(). Note:
|
scrollExtend API
| disable |
| disable the scrollExtend for an element by calling jQuery(‘#my_element’).scrollExtend(‘disable’) |
| enable |
| enable the scrollExtend for an element (if it has been disabled) by calling jQuery(‘#my_element’).scrollExtend(‘enable’) |
scrollExtend Example
jQuery(document).ready(
function() {
jQuery('.scroll_container').scrollExtend(
{
'target': 'div#scroll_items',
'url': 'more_content.html',
'newElementClass': 'list_item more_content'
}
);
}
);
Leave a Comment