Infinite scroll class

infiniteScroll.class.js

/*
  Infinite Scroll Component
  -----------------

  An extensible class for enabling up-and-down infinite scroll on a scrollable element.
  Triggers events on the element when threshold is reached
  
  @ $viewport (jQuery el) - the scrollable viewport element, eg. window
  @ $content (jQuery el) -the content container, eg. document
  @ threshold (int) - a pixel value for determining how far from the bottom we should fire the callback
  @ context (obj) - the context for the callback functions (defaults to window)
  @ downCallback (fn) - function to call on reaching the bottom
  @ upCallback (fn) - function to call on reaching the top. If set, the element should be scrolled to 1px by default so as to detect a 'scroll up' event
*/

var InfiniteScroll = (function(){
      
  function InfiniteScroll(data) {
    
    /*
      Set properties from the data object
    */

    this.$viewport = (data.$viewport) ? data.$viewport : $(window);
    this.$content = (data.$content) ? data.$content : $(document);
    this.threshold = (data.threshold) ? data.threshold : 0;
    this.context = (data.context) ? data.context : window;
    this.downCallback = (data.downCallback) ? data.downCallback : null;
    this.upCallback = (data.upCallback) ? data.upCallback : null;

    /*
     Set up bindings
    */

    this.$viewport.on("scroll.infiniteScroll", $.proxy(this.handleScroll, this));

    this.$viewport.trigger("infiniteScroll:initialize");
  }

  InfiniteScroll.prototype.unbind = function() {

    return this.$viewport.off("scroll.infiniteScroll");
  };

  InfiniteScroll.prototype.handleScroll = function(e) {
    
    e.stopPropagation();
    if (!this.paused && this.$viewport.height() + this.$viewport.scrollTop() + this.threshold >= this.$content.height()) {
    
      this.$viewport.trigger("infiniteScroll:scrollFloor");
      if(this.downCallback){
        this.downCallback.call(this.context);
      }
    } 
    else if (!this.paused && this.$viewport.scrollTop() === 0) {
    
      this.$viewport.trigger("infiniteScroll:scrollCeil");
      if(this.upCallback){
        this.upCallback.call(this.context);
      }
    }

    return this.$viewport.scrollTop();
  };

  InfiniteScroll.prototype.pause = function() {
    
    this.paused = true;
  };

  InfiniteScroll.prototype.resume = function() {
    
    this.paused = false;
  };

  return InfiniteScroll;
})();

init.js

// Initialize the class

var infiniteScroll = new InfiniteScroll({
  $viewport: $(window),
  $content: $(document),
  threshold: 20
});

// Bind a function to the scrollFloor event

infiniteScroll.$viewport.on("infiniteScroll:scrollFloor", function(e){

  e.stopPropagation();
  // ...
});