diff options
Diffstat (limited to 'packages/excalidraw/hooks/useScrollPosition.ts')
| -rw-r--r-- | packages/excalidraw/hooks/useScrollPosition.ts | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/packages/excalidraw/hooks/useScrollPosition.ts b/packages/excalidraw/hooks/useScrollPosition.ts new file mode 100644 index 0000000..0be2eab --- /dev/null +++ b/packages/excalidraw/hooks/useScrollPosition.ts @@ -0,0 +1,32 @@ +import { useEffect } from "react"; +import { atom, useAtom } from "../editor-jotai"; +import throttle from "lodash.throttle"; + +const scrollPositionAtom = atom<number>(0); + +export const useScrollPosition = <T extends HTMLElement>( + elementRef: React.RefObject<T | null>, +) => { + const [scrollPosition, setScrollPosition] = useAtom(scrollPositionAtom); + + useEffect(() => { + const { current: element } = elementRef; + if (!element) { + return; + } + + const handleScroll = throttle(() => { + const { scrollTop } = element; + setScrollPosition(scrollTop); + }, 200); + + element.addEventListener("scroll", handleScroll); + + return () => { + handleScroll.cancel(); + element.removeEventListener("scroll", handleScroll); + }; + }, [elementRef, setScrollPosition]); + + return scrollPosition; +}; |
