Skip to content

Instantly share code, notes, and snippets.

@shabanovtg
Last active November 24, 2015 08:25
Show Gist options
  • Save shabanovtg/840c31eeb0a75a527c53 to your computer and use it in GitHub Desktop.
Save shabanovtg/840c31eeb0a75a527c53 to your computer and use it in GitHub Desktop.

Revisions

  1. shabanovtg revised this gist Nov 24, 2015. No changes.
  2. shabanovtg created this gist Nov 24, 2015.
    51 changes: 51 additions & 0 deletions dont-scroll-parent.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    ;(function ($) {
    'use strict';

    $.fn.dontScrollParent = function(options) {
    options = $.extend({
    // defaults
    wheelstop: null // Function
    }, options);

    // Compatibilities
    var isMsIE = ('Microsoft Internet Explorer' === navigator.appName),
    mousewheelEventName = 'mousewheel wheel DOMMouseScroll touchmove';

    function mousewheelPrevent(event) {
    event.preventDefault();
    event.stopPropagation();
    if('function' === typeof options.wheelstop) {
    options.wheelstop(event);
    }
    }

    return this.each(function() {
    var _this = this,
    $this = $(_this);
    $this.on(mousewheelEventName, function(event) {
    var origiEvent = event.originalEvent,
    scrollTop = _this.scrollTop,
    scrollMax = _this.scrollHeight - $this.outerHeight(),
    delta = -origiEvent.wheelDelta;
    if(isNaN(delta)) {
    delta = origiEvent.deltaY;
    }
    var scrollUp = delta < 0;
    if((scrollUp && scrollTop <= 0) || (!scrollUp && scrollTop >= scrollMax)) {
    mousewheelPrevent(event);
    } else if(isMsIE) {
    // Fix Internet Explorer and emulate natural scrolling
    var animOpt = { duration:200, easing:'linear' };
    if(scrollUp && -delta > scrollTop) {
    $this.stop(true).animate({ scrollTop:0 }, animOpt);
    mousewheelPrevent(event);
    } else if(!scrollUp && delta > scrollMax - scrollTop) {
    $this.stop(true).animate({ scrollTop:scrollMax }, animOpt);
    mousewheelPrevent(event);
    }
    }
    });
    });
    };

    })(jQuery);