Prevent scrolling of parent container when scrolling in overflow:scroll container has reached its limits

Question

Simply put, i guess you all know the issue: you use your mousewheel (or trackpad gesture) to scroll inside a div that is set to overflow:scroll (or a setting to that effect). The moment you reach the end of the scrollable area, the scroll 'commands' are immediately sent to the parent container - the main window for instance.

This can be quite annoying and i wonder if there is a way to prevent it.

I created this jsFiddle to demonstrate the issue and provide a ground for experimentation.

The only idea that came to my mind was using preventDefault but since i am not a JS wizard, i don't see where or how i could apply that correctly.

Answer 1

This is not optimal but I bootstrap uses this for their modal windows.

FIDDLE

.overflowHidden {
    overflow:hidden !important;
}

---

$('#scrollable').hover(function () {
        console.log("hello");
        $('body').addClass('overflowHidden');
    }, function () {
        $('body').removeClass('overflowHidden');
    });