[React] Scroll Progressbar 만들기

지금 작성하는 Scroll Progressbar는 아래의 사이트를 따라하여 만들었습니다.

💡 https://velog.io/@yiyb0603/React에서-Scroll-Progressbar-만들어보기

 

1. 컴포넌트 생성하기

해당 폴더 목록

components라는 폴더를 만들어, ScrollProgress파일을 만들어 이곳에서 progressbar를 만들어줄 것이다. 그에 대한 style을 css파일 넣어 따로 관리해준다.

2. 기본 셋팅하기

1) components/ScrollProgress.js

import React, {
  useState,
  useCallback,
  useEffect,
  useRef,
  MouseEvent,
} from "react";
import "./ScrollProgress.css";

const ScrollProgress = () => {
  const [width, setWidth] = useState(0);
  const progressRef = useRef(null);
  
  return (
    <div
      className="ScrollProgress"
      ref={progressRef}
    >
      <div
        className="Progress"
        style={{ width: width + '%' }}
      >
      </div>
    </div>
  );
};

export default ScrollProgress;

반응형

2) components/ScrollProgress.css

.ScrollProgress {
    width: 100%;
    height: 10px;
    background-color: gray;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.Progress {
    height: 100%;
    background-color: plum;
}

3. progressbar에 스크롤 진행도 표시하기

const handleScroll = useCallback(() => {
  const {
    scrollTop,
    scrollHeight,
    clientHeight
  } = document.documentElement;
  
  if (scrollTop === 0) {
    setWidth(0);
    return;
  }

  const windowHeight = scrollHeight - clientHeight;
  const currentPercent = (scrollTop / windowHeight);
  setWidth(currentPercent * 100);
}, []);

• scrollTop : 수직 스크롤 바의 현재 위치를 반환하거나, 해당 요소의 수직 스크롤 바의 위치를 말한다.

scrollHeight 설명 그림

• scrollHeight : scroll되는 부분을 포함한 실제 요소의 높이값이다.

clientHeight 설명 그림

• clientHeight : 현재 보여지는 요소의 높이 값이다.
• document.documentElement : head, body를 둘러싼 최상위 HTML요소를 반환한다.
• scrollTop === 0 : 스크롤바가 맨 위에 있을 때를 말한다. setWidth를 0으로 설정한 것은 스크롤이 하나도 안 내려갔기 때문이다.
• windowHeight : 스크롤되는 전체 높이 - 현재 보여지는 요소의 높이를 말한다. 이는 스크롤바의 크기를 말한다.
• currentPercent : 스크롤바의 크기에서 scrollTop이 내려온 만큼 계산해준다. 이는 소수점으로 나오기도 한다.
• setWidth(currentPercent * 100) : 소수점으로 나온경우 100을 곱하여 정수로 만든다.

이벤트 적용하기

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

  return () => {
    window.removeEventListener('scroll', handleScroll, true);
  }
}, [handleScroll]);

useEffect를 주어 스크롤될 때마다 이벤트가 적용되게 한다. width가 변하게 한다.

4. Scroll Progressbar 활용하기

: width클릭시에 비율 퍼센트에 따라 스크롤이 이동되게 한다.

1) components/ScrollProgress.js

const handleProgressMove = useCallback((e) => {
  if (progressRef.current !== null) {
    const { scrollWidth } = progressRef.current;
    const { clientX } = e;

    const selectedPercent = ((clientX / scrollWidth) * 100);
    setWidth(selectedPercent);

    const { scrollHeight, clientHeight } = document.documentElement;
    const windowHeight= scrollHeight - clientHeight;

    const moveScrollPercent = ((windowHeight * selectedPercent) / 100);

    window.scrollTo({
      top: moveScrollPercent,
      behavior: 'smooth',
    })
  }
}, []);

<div
      className="ScrollProgress"
      ref={progressRef}
      onClick={handleProgressMove}
    >

코드 설명에 해당되는 그림

• scrollWidth : 위의 사진은 윗쪽은 scrollWidth이며, scroll되는 부분을 포함한 실제 요소의 너비값이다.
• clientX : 클라이언트 영역 내의 가로좌표를 의미한다. 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이 된다.
• 위에서 설명한 기능이며, moveScrollPercent가 계산되면, 클릭시 비율 퍼센트만큼 움직이게 하면 된다.

→ 그러면 클릭시 비율퍼센트만큼 움직이게 된다.

실행화면

scroll Progressbar를 만든 화면

🔗 참고

https://mong-blog.tistory.com/entry/JS-최대-스크롤값-구하는-법scrollTop-scrollLeft