JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js"></script>
<div class="wrapper">
<article class="container" >
 <img src="http://placehold.it/300X250" />
</article>

<!-- Time line to be scroller horizontally -->    
<article class="container" >
    <h3>Timeline</h3>
  <div id="scroll-div">
    <section id="tl-scroll" class="tl-scroll">
      <object>
          <img src="http://placehold.it/1000X200/165ca0/EEE" />
      </object>
    </section>
  </div>
</article>

<!--  -->
<article class="container" >
  <img src="http://placehold.it/300X250" />
</article>
</div>

CSS

.wrapper { width:100%; overflow: hidden }
.container { width: 90%; margin: 0 auto }
#scroll-div .tl-scroll { overflow-x: scroll; display: block; }
h3 { text-align: center }

JavaScript

$(document).ready(function() { 
    $("html").niceScroll();
});       

document.getElementById('tl-scroll').addEventListener('mousewheel', function(event) {
  this.scrollLeft -= (event.wheelDelta);
  console.log('I have stopped it');
  return false;
}, false);
$('#tl-scroll').getNiceScroll().hide();