A jQuery plugin for bi-directional infinite scrolling

jquery.infinitescroll.js

// 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);