JSFiddle - React, Tailwind, and code Playground

HTML

<div class="long-container">
    <div class="short-container" id="scrollable-element">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rhoncus metus, ac iaculis mauris. Fusce nec sem lorem. Aenean erat justo, suscipit vitae felis in, viverra porttitor velit. Suspendisse interdum sapien dolor, at dignissim ante dictum eget. Pellentesque scelerisque massa eu ipsum accumsan, a egestas odio porttitor. Integer felis nunc, lobortis eget magna nec, malesuada commodo metus. Cras ultrices est pellentesque nulla feugiat volutpat.
</p>
<p>
Ut erat erat, hendrerit ac nunc eu, ultricies egestas metus. Sed ultricies posuere ipsum, nec hendrerit mi vestibulum ut. Aliquam faucibus sollicitudin congue. Cras id dui vel magna bibendum faucibus ut dapibus massa. Curabitur sed blandit justo, id tempor enim. Nullam auctor lectus neque, eget ornare nisl suscipit ac. Curabitur tempus, nibh eu condimentum accumsan, sapien orci lacinia massa, eu consectetur dolor nisl vel metus. Ut quis congue enim, sit amet suscipit erat. Duis sagittis nisi eu leo pharetra, vel mollis massa egestas. Cras nisi lectus, facilisis at lorem eget, mollis ultricies leo.
</p>
<p>
Nam feugiat iaculis porta. Morbi hendrerit, ante sit amet lobortis sodales, mauris tortor tempor risus, nec molestie tellus sapien in dui. Proin convallis nisl urna, at accumsan ligula tempus sed. Fusce id nibh in dolor posuere lacinia. Curabitur tempor a odio eget luctus. Nulla sed leo vitae quam suscipit elementum in eu est. Morbi ac lobortis urna, non condimentum libero. Integer gravida magna libero, eu lobortis urna condimentum eu. Nam placerat, odio dignissim viverra accumsan, mauris urna tincidunt est, ac commodo eros turpis sed mi. Ut accumsan orci sit amet metus iaculis sodales. Praesent malesuada nulla iaculis ullamcorper vehicula. Sed volutpat, nulla at viverra suscipit, augue lacus posuere lectus, convallis aliquam enim est ac velit.
</p>
<p>
Morbi laoreet risus non nunc vestibulum varius at nec...

CSS

.long-container{
    height: 3000px;
}
.short-container{
    margin: 20px;
    height: 230px;
    width: 300px;
        overflow-y: hidden;
white-space: nowrap;
    overflow-x: auto;
}

JavaScript

var element = document.getElementById('scrollable-element');

var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 &&
                           navigator.userAgent.indexOf("WebKit") !== -1);
        var isFirefox = (navigator.userAgent.indexOf("firefox") !== -1);

        // Register mousewheel event handlers.
        element.onwheel = wheelHandler;       // Future browsers
        element.onmousewheel = wheelHandler;  // Most current browsers
        if (isFirefox) {              // Firefox only
            element.scrollTop = 0;
            element.addEventListener("DOMMouseScroll", wheelHandler, false);
        }
        // prevent from scrolling parrent elements
        function wheelHandler(event) {
            var e = event || window.event;  // Standard or IE event object
            //linia dolozona, zeby dzialalo skorlowanie horyzontlane
this.scrollLeft -= (e.deltaY * -30);
            // Extract the amount of rotation from the event object, looking
            // for properties of a wheel event object, a mousewheel event object 
            // (in both its 2D and 1D forms), and the Firefox DOMMouseScroll event.
            // Scale the deltas so that one "click" toward the screen is 30 pixels.
            // If future browsers fire both "wheel" and "mousewheel" for the same
            // event, we'll end up double-counting it here. Hopefully, however,
            // cancelling the wheel event will prevent generation of mousewheel.
            var deltaX = e.deltaX * -30 ||  // wheel event
                      e.wheelDeltaX / 4 ||  // mousewheel
                                    0;    // property not defined
            var deltaY = e.deltaY * -30 ||  // wheel event
                      e.wheelDeltaY / 4 ||  // mousewheel event in Webkit
       (e.wheelDeltaY === undefined &&      // if there is no 2D property then 
                      e.wheelDelta / 4) ||  // use the 1D wheel property
                         e.detail * -10 ||  //...