JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">
    <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
 <br><hr>         <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
       <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
 <br><hr>         <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>

    
</div>

CSS

div{
    width:400px;
    height:400px;
    background:#f00;
    overflow:auto;
    float:left;
}

JavaScript

var s=0;
$('#first').scroll(function(e){
    e.preventDefault();
    var tgt='#second';
    if(s==0){
    s=1;
    $(''+tgt).animate({
        scrollTop: $(this).scrollTop(),
         scrollLeft: $(this).scrollLeft()
    }, 10,function(){
    s=0;
    });
    }
});