Prevent parent scroll when in child div

Question

When I scroll to the bottom of the child div, the body element starts scrolling.

How can I prevent this? I only want the body to s

Answer 1

Use this plugin http://mohammadyounes.github.io/jquery-scrollLock/

It fully addresses the issue of locking mouse wheel scroll inside a given container, preventing it from propagating to parent element.

It does not change wheel scrolling speed, user experience will not be affected. and you get the same behavior regardless of the OS mouse wheel vertical scrolling speed (On Windows it can be set to one screen or one line up to 100 lines per notch).

Demo: http://mohammadyounes.github.io/jquery-scrollLock/example/

Source: https://github.com/MohammadYounes/jquery-scrollLock

Answer 2

Accepted answer seems outdated. The "mousewheel" event is a non-standard feature. The "wheel" event seems to be the standard now. Also wheelDelta isn't defined in most browsers. Change to -event.deltaY seems to do the trick. Works in IE 10, Chrome and Firefox

$(".scroll-div").on("wheel", function ( e ) {
            var event = e.originalEvent,
                d = -event.deltaY || -event.detail ;

            this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
    });

Answer 3

Use This

$(document).ready(function() {


// to prevent scrolling of parent div when modal is open
var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
        var overlay = $body.children(".ui-widget-overlay").first();
        // Check if the overlay is visible and restore the previous scroll state
        if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

});

it will lock scrolling on parent window. Worked for me

Answer 4

If you are not nesting your elements inside other scrolling elements (most cases) you can take this simple high performance approach:

$(document).ready(function () {
  $('.self-scroll').on('mouseover', function () {
    document.body.style.overflow='hidden';
  });
  $('.self-scroll').on('mouseout', function () {
    document.body.style.overflow='auto'; // or = 'visible'
  });
});

Now if you apply self-scroll class to any element, it will not scroll body.

Answer 5

By adding some javascript of course!

FIDDLE

$( '.area' ).on( 'mousewheel', function ( e ) {
    var event = e.originalEvent,
        d = event.wheelDelta || -event.detail;

    this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});