Stop propagation for scroll/mousewheel

scrollable.js

/**
 * Stop propagation behavior for scroll of the element but body.
 * Compatibility: IE9+
 * Ref:
 * - http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element#answer-16324762
 * - https://developer.mozilla.org/en-US/docs/Web/Events/wheel
 */
;(function ($) {
  $.fn.scrollable = function () {
    this.on('wheel', function (event) {
      var $this = $(this);
      var scrollTop = this.scrollTop;
      var scrollHeight = this.scrollHeight;
      var height = $this.outerHeight();
      var delta = event.originalEvent.deltaY;
      var up = delta < 0;

      var prevent = function () {
        event.stopPropagation();
        event.preventDefault();
      };

      if (!up && scrollHeight - height - scrollTop === 0) {
        $this.scrollTop(scrollHeight);
        return prevent();
      } else if (up && scrollTop === 0) {
        $this.scrollTop(0);
        return prevent();
      }
    });
  };
})(jQuery);