2023 7.24 클론 코딩 프로그래스 바

클론코딩프로젝트 중 뉴닉사이트의 상세보기 프로그래스 바 구현

 

useEffect와 useState를 사용해 스크롤 이벤트를 감지,

스크롤의 위치에 따라 프로그레스바(색상)의 너비를 조절

먼저, useEffect를 사용해 스크롤 이벤트를 감지하고

useState를 사용해 프로그레스바의 너비를 동적으로 업데이트

마지막으로, 프로그레스바를 반환하는 조건문을 이용해 스크롤이 일정 위치 이하일 때는 프로그레스바를 숨김

 const [scrollProgress, setScrollProgress] = useState(0);

  useEffect(() => {
    const updateScrollProgress = () => {
      const h = document.documentElement;
      const st = window.scrollY;
      const sh = h.scrollHeight || document.body.scrollHeight;
      const percent = (st / (sh - h.clientHeight)) * 100;

      setScrollProgress(percent);
      console.log(percent);
    };

    window.addEventListener("scroll", updateScrollProgress);

    return () => {
      window.removeEventListener("scroll", updateScrollProgress);
    };
  }, []);

  if (window.scrollY <= 115) {
    return null;
  }

확실히 스크롤의 개념을 잘 모르고 있다가 구글의 도움으로 스크롤에 관한 이벤트를 많이 알게 된 것 같다.

푸터부분 수정하고 데이터만 받아오면 거의 끝난다 ㅠㅠ!!