After extensive research and violent testing, i combined my results into a solution that serves my purpose perfectly.
The approach is simple
Instead of measuring scroll conditions (on scroll) from within a container, we simply replace the entire scroll functionality by writing our own scroll handler. That way we have complete control over what is happening, plus the scroll event cannot default (or bubble) to the outer container:
Meet greedyScroll v0.9b
$.fn.extend({
greedyScroll: function(sensitivity) {
return this.each(function() {
$(this).bind('mousewheel DOMMouseScroll', function(evt) {
var delta;
if (evt.originalEvent) {
delta = -evt.originalEvent.wheelDelta || evt.originalEvent.detail;
}
if (delta !== null) {
evt.preventDefault();
if (evt.type === 'DOMMouseScroll') {
delta = delta * (sensitivity ? sensitivity : 20);
}
return $(this).scrollTop(delta + $(this).scrollTop());
}
});
});
}
});
Usage
HTML:
<div class="scrollWrapper"></div>
Javascript:
$('.scrollWrapper').greedyScroll(25);
I found a value of 20 works fine for sensitivity, but some may prefer higher or lower settings.
Disclaimer
I don't claim this works in anything other than Chrome, as this is what i exclusively made sure it works for.
Credits go almost entirely to the team who developed the plugin i linked to in one of the comments to Lokesh's answer.
Code improvements are always welcome.