JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<div id="hor-box">
  <span>some conent 1</span>
  <span>some conent 2</span>
  <span>some conent 3</span>
  <span>some conent 4</span>
  <span>some conent 5</span>
  <span>some conent 6</span>
  <span>some conent 7</span>
</div>

CSS

#hor-box {
    max-width: 300px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100px;
    background: aliceblue;
    border: 1px solid;
}

#hor-box span {
      display: inline-block;
    margin: 3px;
    border: 1px solid;
    background: aqua;
    height: 80px;
}

JavaScript

$(document).ready(()=>{
	$("#hor-box").on("DOMMouseScroll mousewheel", function(event){
  	event.stopPropagation();
    if(event.type == "mousewheel") {
    	$(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY);
    }
    else  {
    	$(this).scrollLeft($(this).scrollLeft() + event.originalEvent.detail*17);
    }
  });


});