JSFiddle - React, Tailwind, and code Playground

HTML

<div id="frame">
  <div id="scrollContainer">
    <div id="scrollDummy">
    </div>
  </div>
  <div id="bildFrame">
    <div id="bild">
    </div>
  </div>
</div>

CSS

#frame {
  position:relative;
  width: 500px;
}
#scrollContainer {
  position: absolute;
  width: 50%; height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
}
#scrollDummy {
  width: 1px; height: 1000px;
}
#bildFrame {
  width: 100%; height: 500px; overflow: hidden;
}
#bild {
  width: 100%;
  height: 1000px;
  background-image: linear-gradient(to bottom right, red, green, blue, yellow);
}

JavaScript

document.getElementById("scrollContainer").addEventListener("scroll", function(evt) {
   
document.getElementById("bildFrame").scrollTop=evt.target.scrollTop;
})