jquery.scrollingWhitelist.js

/* global Underscore jQuery console */
;(function($){

  // this is required to solve virtually any problem
  var logAllTheThings = false;
  function log(){
    if(console && logAllTheThings) console.log.apply(console, arguments);
  }


  /// block all scrolling except on scrollable elements
  document.addEventListener('touchmove', blockScrolling, true);
  var blockScrolling = function (e) {
    var scrollable = false,
        target = e.target,
        parents = $(target).parents();

    console.log("HI!!!!!!!!!!!!!!!!!");
    if( $(target).hasClass('allow-scrolling') ){
      scrollable = true;
    } else {
      $(parents).each(function(i, parent) {
        if( $(parent).hasClass('allow-scrolling') ) scrollable = true;
      });
    }

    if(!scrollable) e.preventDefault();
  }


  /// API
  $.fn.allowScrolling = function(){
    var win = $(window);

    this.each(function(i, el){
      // make scrollable elements have webkit scrolling reset manually on page resize
      var handler = _.debounce( _.bind(resetOverflowScrolling, el), 500, true );
      win.resize(handler);

      // prevent overscrolling
      $(el).
        addClass("allow-scrolling").
        touchwipe({ wipeDown: function(e){ blockOverScrolling(e, this, "up") },
                    wipeUp: function(e){ blockOverScrolling(e, this, "down") },
                    min_move_x: 50,
                    min_move_y: 10,
                    preventDefaultEvents: false });
    });
  }

  function resetOverflowScrolling(){
    var el = $(this);
    el.css({ webkitOverflowScrolling: 'auto' });

    setTimeout(function(){
      el.css({ webkitOverflowScrolling: 'touch' });
    }, 0);
  }


  /// block all scrolling past the top or bottom of scrollable element
  function blockOverScrolling(e, el, direction){
    var block = false;

    // find scrollable
    el = $(el).closest(".allow-scrolling").get()[0];

    if(direction == "up") block = reachedBottom(el);
    if(direction == "down") block = reachedTop(el);


    if(block){
      log("!!! BLOCKING !!!", direction, el);
      e.preventDefault();
    }
  }

  function reachedBottom(el) {
    log("### Reached Bottom:", (el.offsetHeight + el.scrollTop >= el.scrollHeight),
        "element:", el,
        "offset height:",  el.offsetHeight,
        "scroll top:",  el.scrollTop,
        "scroll height:", el.scrollHeight);

    return el.offsetHeight + el.scrollTop >= el.scrollHeight;
  }

  function reachedTop(el) {
    log("#### Reached Top:", (el.scrollTop == 0),
        "element:", el,
        "scroll top:", el.scrollTop);

    return el.scrollTop == 0;
  }


}(jQuery));