useScrollParent.ts

import { RefObject, useEffect, useRef } from 'react';

function getScrollParent(node: HTMLElement | null): HTMLElement | null {
  const isElement = node instanceof HTMLElement;
  const overflowY = isElement && window.getComputedStyle(node).overflowY;
  const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';

  if (!node) {
    return null;
  } else if (isScrollable && node.scrollHeight >= node.clientHeight) {
    return node;
  }

  return (
    getScrollParent(node.parentNode as HTMLElement) || (document.scrollingElement as HTMLElement) || document.body
  );
}

export const useScrollParent = (ref: RefObject<HTMLElement>) => {
  const parent = useRef<HTMLElement | null>(null);

  useEffect(() => {
    parent.current = getScrollParent(ref.current);
  }, [ref.current]);

  return {
    element: parent.current,
    scrollTo: (options: ScrollToOptions = {}) => {
      const defaultOptions: ScrollToOptions = { top: 0, behavior: 'smooth' };
      parent.current?.scrollTo({ ...defaultOptions, ...options });
    },
  };
};