JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pannelRight">
    <div id="timeline" style="width: 600px; display: block;">
        <div id="dragger" style="left: 10px;"></div>
    </div>
</div>

CSS

#pannelRight {
    width:500px;
    height:300px;
    border:1px solid #333;
    overflow:scroll;
}
#dragger {
    width:20px;
    height:50px;
    background:red;
    position:absolute;
}
#timeline{
    width:800px;
    height:700px;
}

JavaScript

$(document).ready(function(){
    
    
var drx = document.getElementById("dragger"),
    dragged,
    offsetX;


 drx.onmousedown = function(e) {
     e = e || window.event
     if (e.button == 2) return
     dragged = this
     offsetX = e.screenX - this.offsetLeft
     return false
 }
             
         
document.onmousemove = function(e) {
leftMove = e.screenX - offsetX;
if (!dragged) return
 e = e || window.event

 var doc = document;
                        
doc.getElementById("dragger").style.left = (leftMove) + "px";
} 
     
 document.onmouseup = function(e) {
 if (!dragged) return
 dragged = null
 }
     
});