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

Example: JsFiddle

Answer 1

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();
    });