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

$(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