JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="main1" style="width:300px;">
    <div class="inner1" style="width:500px;"></div>
</div>
<p class="p1"></p>
</br>
<div class="main2" style="width:200px;">
    <div class="inner2" style="width:1000px;"></div>
</div>
<p class="p2"></p>

CSS

div{
    border-color: black;
    border-style: solid;
    height: 50px;    
}

.main1{
    height: 80px;
    overflow-x: scroll;
}
.main2{
    height: 80px;
    overflow-x: scroll;
}

JavaScript

$(".main1").scroll(function(){
    
    var scrollPercentage = 100 * $(this).scrollLeft()/ (this.scrollWidth - this.clientWidth);
		 
			$(".p1").html(scrollPercentage);			
			
			var scrollValueForAnother = ( $(".main2")[0].scrollWidth - $(".main2")[0].clientWidth) * (scrollPercentage / 100);
			$(".main2").scrollLeft(scrollValueForAnother);
			$(".p2").html($(".main1").scrollLeft() + ' ' + $(".main2").scrollLeft());
});