JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroller" style="width:680px; overflow-x:auto; overflow:hidden; white-space:nowrap; background-color:#aaaaff; padding:10px">
    <div id="innerscroller" style="width:auto;">
        sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf 
    </div>
</div>
<div class="status"></div>

JavaScript

$(".scroller").mousemove(function(e){
    var h = $('#innerscroller').width()+1130;
    var offset = $($(this)).offset();
    var position = (e.pageX-offset.left)/$(this).width();
    
    if(position < 0.10) {
        $(this).animate({ scrollRight: 0 }, 5000);
        $(".status").html(' Percentage:' + position.toFixed(2) + ' lefting');
    } else if(position > 0.90) {
        $(this).animate({ scrollLeft: h }, 5000);
        $(".status").html(' Percentage:' + position.toFixed(2) + ' righting');
    } else {
        $(this).clearQueue().stop();
        $(".status").html(' Percentage:' + position.toFixed(2));
    }
});

$(".scroller").mouseleave(function(e){
    $(this).clearQueue().stop();
    $(".status").html('EXITED');
});