Sync two scrolls different sizes

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'),
       container2Element = $('#container2'),
       containerScrollLeft = containerElement.scrollLeft(),
       containerScrollTop = containerElement.scrollTop();


     const maxScrollLeft = containerElement[0].scrollWidth - containerElement[0].clientWidth;
     const maxScrollTop = containerElement[0].scrollHeight - containerElement[0].clientHeight;

     const maxScrollLeft2 = container2Element[0].scrollWidth - container2Element[0].clientWidth;
     const maxScrollTop2 = container2Element[0].scrollHeight - container2Element[0].clientHeight;

     const ratioLeft = containerScrollLeft / maxScrollLeft;
     const ratioTop = containerScrollTop / maxScrollTop;

     const newScrollLeft = Math.ceil(ratioLeft * maxScrollLeft2);
     const newScrollTop = Math.ceil(ratioTop * maxScrollTop2);

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

   });
 });