垂直滚动的子级，防止父div水平滚动

Question

我实际上可以使父包装器div按预期水平滚动，但是有子div元素需要垂直滚动。问题是，每当我使子级div垂直滚动时，父级div仍然继续水平滚动。关于如何解决这个问题的任何想法？

HTML非常简单：

<div id="wrapper">         <!-- This div scrolls horizontally -->
    <div class="child">    <!-- This div scrolls normally -->
    </div>
</div>

jQuery几乎是一团糟，但我愿意重做它，因为我仍然很陌生，任何可以帮助您的指针都将受到赞赏：

$('#wrapper').on('mousewheel DOMMouseScroll', function(event){
    var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));
    event.preventDefault();

    // Scrollleft on mousewheel
    $(this).scrollLeft( $(this).scrollLeft() - ( delta * 90 ) );
});

我不知道要添加什么内容，以确保滚动#child元素可以正常（垂直）滚动并完全阻止#wrapper滚动。我可以启用#child滚动，但是由于某些原因，#wrapper仍会滚动一次，然后再停止，这意味着#child和#wrapper会同时滚动一秒钟，然后#wrapper停止，而#child继续。