Brown Markup Library

import { useState, useEffect } from "react";
export default function useScrollPercentage() {
  const [scrollPercent, setScrollPercent] = useState(0);
  useEffect(() => {
    const updatePercent = () => {
      const { pageYOffset, innerHeight } = window;
      const {
        body: { scrollHeight },
      } = document;
      setScrollPercent(
        Math.round((pageYOffset / (scrollHeight - innerHeight)) * 100),
      );
    };
    window.addEventListener("scroll", updatePercent);
    updatePercent();
    return () => window.removeEventListener("scroll", updatePercent);
  }, []);
  return scrollPercent;
}