title: Child which scrolls vertically preventing parent div from scrolling horizontally
body: <p>I'm able to actually make a parent wrapper <code>div</code> scroll horizontally as intended but there are child <code>div</code> elements which need to be scrollable vertically. The issue is that whenever I enable the child <code>div</code> to scroll vertically, the parent <code>div</code> still continues to scroll horizontally. Any ideas on how to go about this?</p>
  
  <p>The HTML is pretty straightforward:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;         &lt;!-- This div scrolls horizontally --&gt;
      &lt;div class="child"&gt;    &lt;!-- This div scrolls normally --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery is pretty much a mess but I'm willing to redo it because I'm still new at this and any pointers that can help will be appreciated:</p>
  
  <pre><code>$('#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 ) );
  });
  </code></pre>
  
  <p>I don't know what to add to it to make sure scrolling the <code>#child</code> element will scroll it normally (vertically) and prevent the <code>#wrapper</code> from scrolling at all. I could enable the <code>#child</code> scrolling but for some reason the <code>#wrapper</code> still scrolls once before stopping, which means there's a second where both <code>#child</code> and <code>#wrapper</code> scroll at the same time and then the <code>#wrapper</code> stops while the <code>#child</code> continues.</p>