JSFiddle - React, Tailwind, and code Playground

by knightgao

HTML

<html>
  <div class="a" id=test1>
    <div class="b">1</div>
  </div>
  <div class="a" id=test2>
    <div class="b">1</div>
  </div>

 </html>

CSS

.a{
  background:red;
  height:100px;
  overflow:auto;
}

.b{
  background:yellow;
  height:200px;
}

JavaScript

function ready() {

  const test1 = document.getElementById("test1");
  const test2 = document.getElementById("test2");

  test1.addEventListener('scroll', function() {
    window.requestAnimationFrame(() => {
      let top = this.scrollTop
      let left = this.scrollLeft
      test2.scrollTo(left, top);
    })
  })
  
  test2.addEventListener('scroll', function() {
      console.log("我被触发了")
  })
}

document.addEventListener("DOMContentLoaded", ready);