useScrollInfo

1'use client'
2 
3import * as React from 'react'
4 
5export interface ScrollInfo {
6  left: number
7  top: number
8  right: number
9  bottom: number
10}
11 
12export function useScrollInfo(ref: React.RefObject<HTMLElement | null>) {
13  const [scrollInfo, setScrollInfo] = React.useState<ScrollInfo>({
14    left: 0,
15    top: 0,
16    right: 0,
17    bottom: 0,
18  })
19 
20  const updateScrollInfo = React.useCallback(() => {
21    const el = ref.current
22    if (!el)
23      return
24 
25    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = el
26 
27    setScrollInfo({
28      left: scrollLeft,
29      top: scrollTop,
30      right: scrollWidth - (scrollLeft + clientWidth),
31      bottom: scrollHeight - (scrollTop + clientHeight),
32    })
33  }, [ref])
34 
35  React.useEffect(() => {
36    const el = ref.current
37    if (!el)
38      return
39 
40    updateScrollInfo()
41 
42    el.addEventListener('scroll', updateScrollInfo)
43    window.addEventListener('resize', updateScrollInfo)
44 
45    return () => {
46      el.removeEventListener('scroll', updateScrollInfo)
47      window.removeEventListener('resize', updateScrollInfo)
48    }
49  }, [ref, updateScrollInfo])
50 
51  return scrollInfo
52}