마우스가 자식 스크롤 가능 HTML 요소 위에있을 때 마우스 휠로 부모 스크롤 막대를 이동하는 방법?

Question

다음과 같은 문제가 있습니다. 나는 여러 div를 포함하고있는 parent div를 가지고있다. 부모와 자식 모두 스크롤 막대가 있습니다. 내 마우스가 그 요소 위에있을 때 마우스의 스크롤 막대 만 움직이고 싶습니다. 마우스를 가져 가면 스크롤 가능한 자식 div에 상관없이 움직입니다. 즉, 하위 이벤트에서 이벤트 처리를 방지하고 부모에게 이벤트를 전파하려고합니다. 다음과 같은 것 :

<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> 

참고 : jQuery가 허용됩니다.

Answer 1

이 @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; 
}); 

전체 코드는 here