JSFiddle - React, Tailwind, and code Playground

by Gabriel Muñumel

HTML

<div id="container">
  <div id="big-panel">
    <div id="container2">
      <div id="big-panel2">
      </div>
    </div>
  </div>
</div>

CSS

#container {
  background-color: green;
  width: 500px;
  height: 200px;
  overflow: auto;
  position: relative;
}

#big-panel {
  width: 900px;
  height: 400px;
}

#container2 {
  background-color: blue;
  width: 200px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: auto;
}

#big-panel2 {
  width: 400px;
  height: 600px;
}

JavaScript

$(function() {

   // move along with container
   $('#container').on('scroll', e => {
     $('#container2').css(
       'transform',
       `translate(${e.target.scrollLeft}px, ${e.target.scrollTop}px)`,
     );

     const containerElement = $('#container'),
       bigPanelElement = $('#big-panel'),
       container2Element = $('#container2'),
       bigPanelWidth = bigPanelElement.width(),
       bigPanelHeight = bigPanelElement.height(),
       containerScrollLeft = containerElement.scrollLeft(),
       container2ScrollLeft = container2Element.scrollLeft(),
       containerScrollTop = containerElement.scrollTop(),
       container2Width = container2Element.width(),
       container2Height = container2Element.height();

     const newScrollLeft =
       bigPanelWidth === 0 ?
       0 :
       (500/*container2Width*/ * containerScrollLeft) /
        900 /*bigPanelWidth*/,
       newScrollTop =
       bigPanelHeight === 0 ?
       0 :
       (container2Height * containerScrollTop) /
       bigPanelHeight;

     //console.log(`newScrollLeft ${newScrollLeft}`);

     container2Element.scrollLeft(newScrollLeft).scrollTop(newScrollTop);

   });
 });