import * as React from "react"
import { useScrollSync } from "react-use-scroll-sync"
 
const App = () => {
  const ref1 = React.useRef<HTMLDivElement>(null)
  const ref2 = React.useRef<HTMLDivElement>(null)
 
  useScrollSync([ref1, ref2], {
    horizontal: true,
    vertical: true,
    proportional: true
  })
 
  return (
    <>
      <div
        ref={ref1}
        style={{ overflow: "auto", width: "300px", height: "300px" }}
      >
        <div style={{ width: "500px" }}>Lorem ipsum dolor sit amet...</div>
      </div>
 
      <div
        ref={ref2}
        style={{ overflow: "auto", width: "300px", height: "300px" }}
      >
        <div style={{ width: "500px" }}>Lorem ipsum dolor sit amet...</div>
      </div>
    </>
  )
}