Function useAutoScroll

packages/react-aria/src/dnd/useAutoScroll.ts:27–116

(ref: RefObject<Element | null>)

}

export function useAutoScroll(ref: RefObject<Element | null>): AutoScrollAria {
  let scrollableRef = useRef<Element>(null);
  let scrollableX = useRef(true);
  let scrollableY = useRef(true);
  useEffect(() => {
    if (ref.current) {
      scrollableRef.current = isScrollable(ref.current)
        ? ref.current
        : getScrollParent(ref.current);
      let style = window.getComputedStyle(scrollableRef.current);
      scrollableX.current = /(auto|scroll)/.test(style.overflowX);
      scrollableY.current = /(auto|scroll)/.test(style.overflowY);
    }
  }, [ref]);

  // oxlint-disable-next-line react/react-compiler
  let state = useRef<{
    timer: ReturnType<typeof requestAnimationFrame> | undefined;
    dx: number;
    dy: number;
  }>({
    timer: undefined,
    dx: 0,
    dy: 0
  }).current;

  useEffect(() => {
    return () => {
      if (state.timer) {
        cancelAnimationFrame(state.timer);
        state.timer = undefined;
      }
    };
    // state will become a new object, so it's ok to use in the dependency array for unmount
  }, [state]);

  let scroll = useCallback(() => {
    if (scrollableX.current && scrollableRef.current) {
      scrollableRef.current.scrollLeft += state.dx;
    }
    if (scrollableY.current && scrollableRef.current) {
      scrollableRef.current.scrollTop += state.dy;
    }

    if (state.timer) {
      // oxlint-disable-next-line react/react-compiler
      state.timer = requestAnimationFrame(scroll);
    }
  }, [scrollableRef, state]);

  return {
    move(x, y) {
      // Most browsers auto scroll natively, but WebKit on macOS does not (iOS does 🤷‍♂️).
      // https://bugs.webkit.org/show_bug.cgi?id=222636
      if (!isWebKit() || isIOS() || !scrollableRef.current) {
        return;
      }