React - 스크롤 퍼센트 구하기

스크롤 퍼센트 구하기

이전 글에는 요소의 절대위치를 구하는 글을 적었습니다.
이번에는 현재 내가 얼마나 스크롤을 했는지 퍼센트를 구하는 방법입니다!

( 스크롤 된 높이+ 보고있는화면(viewport)높이 ) / 전체문서높이 * 100

활용하기

• Element.scrollTop : 요소의 콘텐츠가 세로로 스크롤되는 픽셀수
• Element.scrollHeight : 요소의 콘텐츠의 총 높이
• Element.clientHeight : 요소의 내부높이

스크롤 시 몇 퍼센트 했는지 알 수 있는 로직입니다.

const [percentage, setPercentage] = useState();

const getScrollPercentage = () => {
    const scroll = document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;

    const viewport = scrollHeight - clientHeight;
    const percentage = (scroll / viewport) * 100;
  
    return setPercentage(Math.floor(percentage));
  };

  useEffect(() => {
    window.addEventListener('scroll', getScrollPercentage);

    return () => window.removeEventListener('scroll', getScrollPercentage);
  }, []);