Skip to content

Instantly share code, notes, and snippets.

@rpheath
Created November 2, 2010 01:46
Show Gist options
  • Select an option

  • Save rpheath/659157 to your computer and use it in GitHub Desktop.

Select an option

Save rpheath/659157 to your computer and use it in GitHub Desktop.
A jQuery plugin for bi-directional infinite scrolling
(function($) {
$.scroller = {
// default settings
settings: {
url: null,
reversed: true,
triggerAt: 250,
page: 2,
container: $(document),
update: '#scroller'
},
// placeholder for the ajax request
request: null,
// makes the ajax request and loads more data
scroll: function() {
// if we're still requesting, wait until we're done ...
if (this.request && this.request.readyState < 4 && this.request.readyState > 0) return;
// get some data
this.request = $.get(this.settings.url, { page: this.settings.page }, function(data) {
if (data != '') {
if (this.settings.page > 1) {
// we want to append content if we're in normal scrolling
// mode, but prepend content if we're in reversed scrolling mode
this.settings.reversed ? $(this.settings.update).prepend(data) : $(this.settings.update).append(data);
} else {
// we must not have any content loaded yet, so load it
$(this.settings.update).html(data);
}
// keep track of the page we're on
settings.page++;
}
});
}
};
// pulled this out because figuring out scroll position might be
// a cross-browser challenge, rather have that logic separate
var shouldScroll = function(settings, element) {
if (settings.url == null) return false;
var loadMoreContent = false, calculatedHeight = null;
if (settings.reversed) {
// reversed = load data when scrolling up
loadMoreContent = (settings.triggerAt >= element.scrollTop());
} else {
// !reversed = load data when scrolling down
loadMoreContent = (settings.triggerAt >= (settings.container.height() - element.height() - element.scrollTop()));
}
return loadMoreContent;
}
// the plugin
$.fn.infiniteScroll = function(options) {
$.extend($.scroller.settings, options || {});
// settings based on global $.scroller settings
var settings = $.scroller.settings;
return $(this).each(function() {
var element = $(this);
// bind the scroll event for infinite scrolling
element.scroll(function(e) {
if (shouldScroll(settings, element)) $.scroller.scroll();
})
// check to see if we're starting in a
// place that needs a content update
$.scroller.scroll();
});
};
})(jQuery);
@tridip-bba
Copy link
Copy Markdown

how could i use this plugin or call the function. it would be much better if you publish a article on it like how to use your plugin. looking for guidance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment