Simulate a 'scrollstart' and 'scrollend' event by listening to scroll and debouncing the calls

useScrollStartEndEvents.ts

/**
 * Simulate a 'scrollstart' and 'scrollend' event by listening to scroll and debouncing the calls.
 *
 * The proposal to standardize part of this is https://github.com/w3c/csswg-drafts/issues/3744
 */
export function useScrollStartEndEvents(
    ref: RefObject<HTMLElement>,
    onScrollStart?: () => void,
    onScrollEnd?: () => void,
    debounceTimeMs: number = 100
) {
    const isScrolling = useRef(false);
    const scrollLeft = useRef(0);
    const scrollTop = useRef(0);
    const activeTimeout = useRef<number | undefined>();

    const onTimeout = useCallback(() => {
        if (ref.current === null) {
            return;
        }

        const element = ref.current;
        if (element.scrollLeft === scrollLeft.current && element.scrollTop === scrollTop.current) {
            isScrolling.current = false;
            activeTimeout.current = undefined;
            onScrollEnd?.();
        } else {
            scrollLeft.current = element.scrollLeft;
            scrollTop.current = element.scrollTop;
            activeTimeout.current = (setTimeout(onTimeout, debounceTimeMs) as unknown) as number;
        }
    }, [ref, debounceTimeMs, onScrollEnd]);

    // eslint-disable-next-line react-hooks/exhaustive-deps
    const onScroll = useCallback(
        throttleRaf(() => {
            if (ref.current === null) {
                return;
            }
            if (!isScrolling.current) {
                const element = ref.current;
                isScrolling.current = true;
                scrollLeft.current = element.scrollLeft;
                scrollTop.current = element.scrollTop;
                onScrollStart?.();
            }

            if (activeTimeout.current !== undefined) {
                clearTimeout(activeTimeout.current);
            }
            activeTimeout.current = (setTimeout(onTimeout, debounceTimeMs) as unknown) as number;
        }),
        [ref, onScrollStart, debounceTimeMs, onTimeout]
    );

    useEffect(() => {
        if (ref.current === null) {
            return;
        }

        const element = ref.current;

        element.addEventListener('scroll', onScroll);
        return () => element.removeEventListener('scroll', onScroll);
    }, [ref, onScroll]);
}