Prevent parent scroll when in child div

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

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

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.