かきすて

reach.js

/**
 * Reach element when triggered custom events
 *
 * @dependency underscore or lodash
 * @Inspired by https://github.com/alexblack/infinite-scroll
 * @author ahomu
 */
(function(win, doc, _) {

  'use strict';

  var Reach = function(options) {
    var self = this,
      updateInitiated = false,
      prevScrollPos   =  win.pageYOffset,
      currentCount    = 0;

    _.defaults(options, {
      el: null,
      distance: 100,
      throttle: 500,
      perInterval: 3,
      whenPageBottom: false,
      reachEvent: 'reach',
      stopEvent: 'stop'
    });

    this.watcher = function() {
      if (updateInitiated) {
        return;
      }

      var event        = null,
          scrollYPos   = win.pageYOffset,
          targetYOffset= !options.whenPageBottom ? options.el.offsetTop
                                                 : doc.height || doc.body.scrollHeight,
          clientHeight = doc.documentElement.clientHeight;

      if (scrollYPos === prevScrollPos) {
        return; // nothing to do
      }

      if (targetYOffset - (scrollYPos + clientHeight) < options.distance) {

        // increment reach counter & pause
        currentCount++;
        self.pause();

        // If currentCount greater than perInterval when do not trigger event.
        if (currentCount > options.perInterval) {
          currentCount = 0;
        } else {
          // reach event
          event = doc.createEvent('Events');
          event.initEvent(options.reachEvent, true, true, null, null, null, null, null, null, null, null, null, null, null, null);
          event.isDefaultPrevented = function() {
            return this.defaultPrevented;
          };
          options.el.dispatchEvent(event);

          // stop event
          if (currentCount === options.perInterval) {
            event = doc.createEvent('Events');
            event.initEvent(options.stopEvent, true, true, null, null, null, null, null, null, null, null, null, null, null, null);
            event.isDefaultPrevented = function() {
              return this.defaultPrevented;
            };
            options.el.dispatchEvent(event);
          }
        }
      }

      prevScrollPos = scrollYPos;
    };

    this.pause = function() {
      updateInitiated = true;
    };

    this.resume = function() {
      updateInitiated = false;
    };

    this.destroy = function() {
      win.onscroll = doc.ontouchmove = void 0;
    };

    win.onscroll = doc.ontouchmove = _.throttle(this.watcher, options.throttle);
  };

  // export
  if (typeof define === 'function' && define.amd) {
    define(function() {
      return Reach;
    });
  } else {
    win.Reach = Reach;
  }

})(window, document, _);

usage.js

var reach = new Reach({
  el: $('.js_fetch_more')[0],
  distance: 100
});

$(document).on('reachbottom', '.js_fetch_more', fetchMore);

$(document).on('click', '.js_fetch_more', fetchMore);

function fetchMore(evt) {
  $.ajax({}).done(function() {
    reach.resume();
  });
}