Disable parent scroll when in child div

Question

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

How can I prevent this? I want the body scroll when the cursor is over it.

Example: JsFiddle

Answer 1

By adding, of course, javascript!

Fiddle

 $( '.area' ).on( 'mousewheel', function ( e ) { var event = e.originalEvent, d = event.wheelDelta || -event.detail; this.scrollTop += ( d < 0 ? 1 : -1 ) * 30; e.preventDefault(); }); 

Answer 2

Use this plugin http://mohammadyounes.imtqy.com/jquery-scrollLock/

It completely solves the problem of blocking the scroll of the mouse wheel inside this container, preventing its distribution to the parent element.

It does not change the speed of the wheels, does not affect the user. and you get the same behavior, regardless of the mouse mouse scroll speed (in Windows it can be installed on one screen or one line up to 100 lines per label).

Demo: http://mohammadyounes.imtqy.com/jquery-scrollLock/example/

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

Answer 3

If you don't paste your elements into other scroll elements (in most cases), you can use 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'; }); }); 

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

Answer 4

The accepted answer seems outdated. The mousewheel event is a non-standard function. The wheel event is now standard. Also wheelDelta is not 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 5

Use it

 $(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 block scrolling in the parent window. Worked for me