React hook to track and set scroll position of an element

useScroll.ts

import { RefObject, useCallback, useEffect, useState } from 'react';

export interface ScrollToOptions {
  x?: number;
  y?: number;
  behavior?: ScrollBehavior;
}

export interface UseScrollOptions {
  disabled?: boolean;
}

export default function useScroll<T extends Element>(
  ref: RefObject<T>,
  { disabled = false }: UseScrollOptions = {}
) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const el = ref.current;
    if (!el || disabled) return;

    function updatePosition() {
      setPosition({
        x: el?.scrollLeft ?? 0,
        y: el?.scrollTop ?? 0,
      });
    }

    updatePosition();

    el.addEventListener('scroll', updatePosition);

    return () => {
      el.removeEventListener('scroll', updatePosition);
    };
  }, [disabled, ref]);

  const scrollTo = useCallback(
    ({ x, y, behavior }: ScrollToOptions) => {
      ref.current?.scrollTo({ left: x, top: y, behavior });
    },
    [ref]
  );

  return [position, scrollTo] as const;
}