Reactで同時に、一緒にスクロールをしたい。

結論

const Tables = () => {
  const rightEl = useRef()
  const leftEl = useRef()

  const handleScroll = (isLeft) => {
    isLeft
      ? (rightEl.current.scrollTop = leftEl.current.scrollTop)
      : (leftEl.current.scrollTop = rightEl.current.scrollTop)
  }

  return (
    <>
      <LeftTable ref={leftEl} onScroll={handleScroll}/>
      <RightTable ref={rightEl} onScroll={handleScroll}/>
    </>
  )
}

解説

ReactではuseRefを使うことで要素を取得することができます。そして、スクロール量もその取得した要素と一緒に得られるので片方のスクロール量をもう片方のスクロール量にすることでスクロールを同期させることができます。