Roko Simultaneous DIV Scroll

by thomastthai

HTML

<div id="left" class="scrollSyncV">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Consequuntur rerum rem quae iste earum aspernatur.
  Laudantium eum, animi maiores unde itaque,
  repellat sed magni dicta earum alias, ipsa ad labore!
  Deserunt recusandae modi. Earum autem provident eum in officia.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Iure possimus doloribus veritatis dolores voluptate quae
  fuga eaque mollitia magni nam exercitationem ratione itaque
  est debitis dolor, nemo repudiandae voluptas sequi!
<br>
End.
</div>
<div id="right" class="scrollSyncV">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Consequuntur rerum rem quae iste earum aspernatur.
  Laudantium eum, animi maiores unde itaque,
  repellat sed magni dicta earum alias, ipsa ad labore!
<br>End.
</div>

CSS

body {
  display: flex;
}

.scrollSyncV {
  width: 50%;
  height: 10rem;
  overflow: auto;
  border: 1px solid black;
  box-sizing: border-box;
  font-size: 2.5rem;
  scroll-behavior: instant;
}

.scrollSyncV div {
  border: 10px dashed #aaa;
}

JavaScript

const elsDIV = document.querySelectorAll(".scrollSyncV");

elsDIV.forEach(el => {

  const elOther = [...elsDIV].filter(e => e !== el)[0];

  el.addEventListener('wheel', evt => {
    evt.preventDefault();
    const delta = Math.sign(evt.deltaY);
    console.log("delta:", delta);
    console.log("el id:", el.id)
    elsDIV.forEach(el => el.scrollBy({top: 90.909 * delta}))
  });
 
  /**
  ['wheel', 'scroll'].forEach(function(e){
  	
    el.addEventListener(e, evt => {
  		evt.preventDefault();
      console.log("event:", e)
      if (e == 'wheel') {
  			delta = Math.sign(evt.deltaY);
        console.log("deltaY:", evt.deltaY)
      } else if (e == 'scroll') {
      	delta = Math.sign(el.scrollTop);
      	console.log("scrollTop:", el.scrollTop)
      }
      console.log("delta:", delta)
  		elsDIV.forEach(el => el.scrollBy({top: 90.909 * delta}))
  	});
  });
  **/
});