10

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 scroll when the cursor is over it.

Example: JsFiddle

mikedidthis
  • 4,899
  • 3
  • 28
  • 43
user3675747
  • 127
  • 1
  • 1
  • 6
  • I edited the question, if the requirements are incorrect, please roll back. As far as I am aware, this is the default browser behavior. – mikedidthis Aug 04 '14 at 19:05
  • Possible duplicate of [Scrolling child div scrolls the window, how do I stop that?](https://stackoverflow.com/questions/10211203/scrolling-child-div-scrolls-the-window-how-do-i-stop-that) – Jason C Jun 07 '17 at 15:59

5 Answers5

13

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();
});
Jmh2013
  • 2,625
  • 2
  • 26
  • 42
  • 3
    Why * 30? Can you please elaborate? It works, but how? – noinstance Aug 13 '15 at 18:52
  • 30 is the number of pixels you scroll with each tick of the mousewheel. It is multiplied by -1 (to move backwards) if the original delta was negative. – salezica Sep 29 '15 at 20:16
  • 2
    Instead of only preventing parent scrolling this completely hijacks scroll and adds it's own scroll logic which isn't cross compatible and not very good. – Dominik Serafin May 10 '17 at 10:00
6

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();
    });
2748
  • 123
  • 2
  • 5
3

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.

Iman Mohamadi
  • 6,552
  • 3
  • 34
  • 33
2

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

MK.
  • 5,139
  • 1
  • 22
  • 36
0

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

Mohit Singh
  • 5,977
  • 2
  • 24
  • 25