Question

the jsfiddle in question. I want to make it so if you scroll inside the ‘c’ div it doesn’t propagate past the ‘b’ div and into the ‘a’. The problem seems to be that the scroll event doesn’t propagate as i’d expect it to. Is there any way to make it behave the way I want it to? I tried the same thing with the click event and that worked like a charm.

Answer 1

scroll is too high level and isn’t directly related to the mouse wheel but to the scrolling of the item.

It works if you use the mousewheel event :

$('#c').on('mousewheel', function(e){
    $('#console').append('<br />C scrolled!');
});
$('#b').on('mousewheel', function(e){
    e.stopPropagation();
    $('#console').append('<br />B scrolled!');
});
$('#a').on('mousewheel', function(e){
    $('#console').append('<br />A scrolled!');
});

You can check here that only “C scrolled” and “B scrolled” are displayed when you scroll with the mouse over C : http://jsfiddle.net/dystroy/pvxXJ/