import React, { useLayoutEffect, useEffect, useRef } from 'react'

export default function App() {
  const scrollHandler = (e: React.UIEvent<HTMLDivElement>) => {
    const scrollTop = e.currentTarget.scrollTop
    window.history.replaceState({}, '', `?top=${scrollTop}`)
  }
  const container = useRef<HTMLDivElement>(null)
  useLayoutEffect(() => {
    if (container.current) {
      const top = window.location.search.split('=')[1]
      container.current.scrollTop = Number(top) || 0
    }
  })
  return (
    <div
      onScroll={scrollHandler}
      ref={container}
      id="container"
      className="h-[500px] overflow-auto"
    >
      {Array.from({ length: 500 }).map((_, index) => {
        return <div key={index}>{index + 1}</div>
      })}
    </div>
  )
}