JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
   <div id="text">
Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. Flarm glib doot ne ban quistor resbola ma capartuli. Eef vlab geff eek boz xahagret. Iy orma laduta quento dimusi hab fler isonovog. 
    </div>
</div>
<input id="info"></div>

CSS

#container { width:200px; height:200px; overflow:auto; }
#text { width:400px; height:400px }

JavaScript

/* Enable "scrollh" Event jQuery Plugin */
(function ($) {
    $.fn.enableHScroll = function() {
        function handler() {
            var lastPos = $(this).scrollLeft();
            $(this).on('scroll', function() {
               var newPos = $(this).scrollLeft();
               if(newPos !== lastPos) {
                   $(this).trigger('scrollh', newPos - lastPos);
                   lastPos = newPos;
               }
           });
        }
        return this.each(function() {
            var el = $(this);
            if (!el.data('hScrollEnabled')) {
                el.data('hScrollEnabled', true);                 
                handler.call(el);
            }
        });
    }
}(jQuery));
    
$('#container')
    .enableHScroll()
    .on('scrollh', function(obj, offset) {
        $('#info').val(offset);
    });