当鼠标悬停在子可滚动HTML元素上时，如何使用鼠标滚轮移动父滚动条？

Question

I have the following issue. I have parent div which contains several child divs. Both parent and children have scroll bars. I want to move only the scroll bar of the parent when my mouse is over that element, no matter the mouse hover a scrollable child div or don't. In other words I want to prevent event handling on the child event and propagate event to the parent. Something like this:

<div id='parent' style='overflow-y:auto;height:200px;width:100%'>
    <div class='child' style='overflow-y:auto;height:100px'>
    </div>
    <div class='child' style='overflow-y:auto;height:100px'>
    </div>
    <div class='child' style='overflow-y:auto;height:100px'>
    </div>
</div>

<script>
    $('.child').bind('mousewheel DOMMouseScroll', function(e) {
        $(e.target).parent().trigger(e);
    });
</script>

Note: jQuery is allowed.

Answer 1

This is the right solution thanks to @DavidFregoli:

$('.child').on('mousewheel DOMMouseScroll', function(e) {
    var $div = $(this),
    $parent = $div.parent(),
    scrollAmount = 30,
    currentScroll = $parent.scrollTop(),
    newScroll = currentScroll + (e.originalEvent.wheelDelta < 0 ? scrollAmount : -scrollAmount);
    $parent.scrollTop(newScroll);
    return false;
});

The whole code is here