JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mydiv">
aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffffffffffffffffff
</div>

CSS

#mydiv{
            width: 200px;
            background-color: red;
            overflow-x: hidden;
        }

JavaScript

var timer;
        function leftScroll(){
            document.getElementById("mydiv").scrollLeft -= 1;
        }
        function rightScroll(){
            document.getElementById("mydiv").scrollLeft += 1;
        }
        function horizontalScroll(evt){
            clearInterval(timer);
            var pos = $("#mydiv").position();
            if(evt.pageX < pos['left'] + 50){
               timer = setInterval(leftScroll, 10);
           }
           if(evt.pageX > pos['left'] + $("#mydiv").width() - 50){
                timer = setInterval(rightScroll, 10);
            }
        }
        $(document).ready(function(){
            $("#mydiv").bind("mouseover", function(){
                $("#mydiv").bind("mousemove", horizontalScroll);
            });
            $("#mydiv").bind("mouseout", function(){
                clearInterval(timer);
                $("#mydiv").unbind("mousemove", horizontalScroll);
            });
        });