JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">
<script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<div class="scrollbar-outer">
    <p style="width: 1600px;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
        scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
        Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
        hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
        pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
        sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
        ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
        nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
        viverra nisi, in interdum massa nibh nec erat.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
        scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
        Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
        hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
        pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
        sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
        ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
        nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
        viverra nisi, in interdum massa nibh nec erat.
    </p>
</div>

CSS

.scrollbar-outer {
    max-width: 500px;
    margin: 0 auto;
}

JavaScript

jQuery(document).ready(function($){

    var container = $('.scrollbar-outer');
    var scrollTo = {}, scrollToValue = 0, isScrolling = false;
    var mouseScroll = function(event){
        var delta = event.originalEvent.wheelDelta * -1 || event.originalEvent.detail;
        var maxScrollValue = container.prop("scrollWidth") - container.parent().width() - parseInt(container.css('left'));

        if(!((scrollToValue <= 0 && delta < 0) || (scrollToValue >= maxScrollValue && delta > 0))){
            scrollToValue = scrollToValue + delta;
            if(scrollToValue < 0)
                scrollToValue = 0;
            if(scrollToValue > maxScrollValue)
                scrollToValue = maxScrollValue;

            scrollTo = scrollTo || {};
            scrollTo['scrollLeft'] = scrollToValue;
            setTimeout(function(){
                if(scrollTo){
                    isScrolling = true;
                    container.stop().animate(scrollTo, 240, 'linear', function(){
                        scrollToValue = container.scrollLeft();
                        isScrolling = false;
                    });
                    scrollTo = null;
                }
            }, 1);
        }

        event.preventDefault();
        return false;
    };

    container.scrollbar().on({
        "MozMousePixelScroll": mouseScroll,
        "mousewheel": mouseScroll,
        "scroll": function(){
            if(!isScrolling){
                scrollToValue = container.scrollLeft();
            }
        }
    });
});