Reactでスクロール可能な要素の下からのスクロールポジションを取得する

const Sample: NextPage = () => {
  const scrollableContainerRef = useRef<HTMLDivElement>(null)
 
  useEffect(() => {
    scrollableContainerRef?.current?.addEventListener('scroll', onScroll)
    return () => {
      scrollableContainerRef?.current?.removeEventListener('scroll', onScroll)
    }
  }, [])
 
  const onScroll = useCallback(() => {
    const element = scrollableContainerRef.current
    if (!element) {
      return
    }
    const scrollBottom = getScrollBottom(element)
    console.log(`scrollBottom: ${scrollBottom}`)
  }, [])
 
  /** 下からのスクロール位置を取得 */
  const getScrollBottom = (element: HTMLDivElement): number => {
    return element.scrollHeight - element.clientHeight - element.scrollTop
  }
 
  return (
    <div
      ref={scrollableContainerRef}
      className={styles.scrollableContainer}
      {/* コンテンツ */}
    />
  )
}

.scrollableContainer {
  overflow-y: scroll;
  height: 100vh;
}