-
-
Save karlosRivera/888267336bbb798d6e32 to your computer and use it in GitHub Desktop.
A jQuery plugin for bi-directional infinite scrolling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// A bi-directional infinite scrolling jQuery plugin | |
// | |
// Usage Example: | |
// $(window).infiniteScroll({ url: window.location.href }) | |
(function($) { | |
$.scroller = { | |
// default settings | |
settings: { | |
url: null, | |
reversed: false, | |
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; | |
// trigger a before loading hook | |
$(this.settings.update).trigger('infinitescroll.before'); | |
// 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); | |
} | |
// trigger an after loading hook | |
$(this.settings.update).trigger('infinitescroll.after'); | |
// keep track of the page we're on | |
settings.page++; | |
} else { | |
// trigger a "no data" hook | |
$(this.settings.update).trigger('infinitescroll.nodata'); | |
} | |
}); | |
} | |
}; | |
// 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; | |
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.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 | |
if (shouldScroll(settings, element)) $.scroller.scroll(); | |
}); | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment