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

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