[리액트] Scroll indicator 만들기

코드 |

import React, { useState, useEffect } from "react";
import * as S from "./styles";

function ScrollTracker() {
  const pageHeight = document.body.scrollHeight - document.body.clientHeight;
  const [scrollY, setScrollY] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const s = window.pageYOffset;
      setScrollY(s);
    };
    window.addEventListener("scroll", onScroll, true);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <S.ScrollTracker ratio={100 - (scrollY / pageHeight) * 100} />;
}

function Header() {
  return (
    <>
      <S.Header>
        <S.ScrollBackground>
          <ScrollTracker />
        </S.ScrollBackground>
        <S.HeaderContents>Contents</S.HeaderContents>
      </S.Header>
    </>
  );
}

export default Header;

 

pageHeight에는 페이지의 전체 높이를 미리 저장해둔다.

useEffect를 이용해 최초 렌더링될 때 스크롤 이벤트 리스너를 달아주고, 콜백 함수 onScroll을 넣어준다. 이 때 onScroll에는 setState를 이용해 scrollY값을 따로 저장해준다.

ScrollTracker funtion을 따로 분리한 이유는, 스크롤이 변할 때마다 헤더 전체가 재렌더링되는 것을 방지하기 위해서이다.

ScrollTracker의 props에는 100에서 뺀 비율이 들어가는데, ScrollBackground에 그라데이션을 넣고 Tracker는 반대로 하얀 배경으로 넣어서 트래커가 줄어들수록 배경이 보이는 구조로 만들어서 그렇다. (아래 CodeSandbox 코드 참조)

 

결과물 |