Created
November 2, 2010 01:46
-
-
Save rpheath/659157 to your computer and use it in GitHub Desktop.
A jQuery plugin for bi-directional infinite scrolling
This file contains hidden or 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
| (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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.