useScrollBody

useDocumentScroll.ts

import { useEffect, useState } from 'react';

export default function useDocumentScrollBottom(offset: number = 0): boolean {
  const [atBottom, setAtBottom] = useState(false);

  useEffect(() => {
    const el = document;

    let timeoutId: any;

    function eventHandler() {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
      const scrollHeight = el?.scrollingElement?.scrollHeight ?? 0;
      const offsetHeight =
        (el?.scrollingElement?.scrollTop ?? 0) +
        (el?.scrollingElement?.clientHeight ?? 0) +
        offset;
      timeoutId = setTimeout(() => {
        setAtBottom(offsetHeight >= scrollHeight);
      }, 100);
    }

    el.addEventListener('scroll', eventHandler);

    return () => el.removeEventListener('scroll', eventHandler);
  }, []);

  return atBottom;
}