JSFiddle - React, Tailwind, and code Playground

HTML

<div>Scrolling of below boxes is synchronized.. scroll the second one and first scrolls</div>
<div id="wrapper">
<div id="box1">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div id="box2">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div id="parentDiv"><div id="inWrapper"></div></div>
</div>

CSS

.item {
    height: 40px;
    margin: 3px;
}
.item:nth-child(even) {
    background-color: grey;
}
.item:nth-child(odd) {
    background-color: black;
}
#box1, #box2 {
    height: 200px;
    overflow: auto;
    width: 200px;
    display:inline-block;
}
#box1 {
    overflow: hidden;
}
#wrapper {
  position:relative;
}
#inWrapper {
  width:100%;
  height:20px;
  background-color:yellow;
}
#parentDiv {
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  opacity:0;
  overflow-y:scroll;
}

JavaScript

$('#inWrapper').css('height', $('#box2').prop("scrollHeight"));
$('#parentDiv').on('scroll', function () {
    $('#box1, #box2').scrollTop($(this).scrollTop());
});