title: Horizontal Scrolling on React Component Using Vertical Mouse Wheel
body: <p>I have a component that resizes into a horizontal row of bootstrap cards when in a smaller desktop window. For users without a horizontal mouse wheel and not using a touchpad, I would like to allow users to scroll horizontally using their vertical mouse wheel movements when hovering over this particular component.</p>
  
  <p>Here is the original StackOverflow issue I based my code off of:
  <a href="https://stackoverflow.com/a/15343916/8387497">https://stackoverflow.com/a/15343916/8387497</a></p>
  
  <p>Horizontal Scroll helper component:</p>
  
  <pre><code>function horizontalScroll (event) {
    const delta = Math.max(-1, Math.min(1, (event.nativeEvent.wheelDelta || -event.nativeEvent.detail)))
    event.currentTarget.scrollLeft -= (delta * 10)
    event.preventDefault
  }
  </code></pre>
  
  <p>How I've implemented it on component requiring horizontal scrolling:</p>
  
  <pre><code>&lt;Row className='announcements-home' onWheel={horizontalScroll} &gt;
  </code></pre>
  
  <p>When I've placed this <code>horizontalScroll</code> helper function within the React onWheel event, it scrolls horizontally AND vertically. My desired outcome is just horizontal scrolling. Also, Firefox does not appear to respond at all to horizontal scrolling with these changes.</p>