TIL | 간단한 가로 스크롤바 구현하기

간단한 가로 스크롤바 만들기

참고 자료

---

 

소스코드

import React, { useCallback, useEffect, useState } from "react";

import styled from "styled-components";

const Parralax = () => {
  const [progress, setProgress] = useState<number>(0);

  const handleEvent = useCallback((): void => {
    const { scrollTop } = document.documentElement; // y축으로 스크롤한 거리
    const { scrollHeight } = document.body; // body 태그(전체 컨텐츠)의 height
    const { outerHeight } = window; // 브라우저의 창 전체의 height
    // scrollTop + outerHeight를 하게 되면 scrolHeight 결과값이 나온다.
    const per = Math.round((scrollTop / (scrollHeight - outerHeight)) * 100);
    setProgress(per);
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", handleEvent);
  }, []);

  return (
    <StyledParralax>
      스크롤
      <StyledProgress1 />
      <StyledProgress2 progress={progress} />
    </StyledParralax>
  );
};

export default Parralax;

const StyledParralax = styled.div`
  padding: 50px;
  color: white;
  font-weight: 700;
  font-size: 40px;
  background: linear-gradient(
    150deg,
    black,
    red,
    orange,
    yellow,
    green,
    blue,
    pink,
    purple
  );
  height: 10000px;
`;

const StyledProgress1 = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: white;
`;

const StyledProgress2 = styled.div<{ progress: number }>`
  position: fixed;
  top: 0;
  left: 0;
  width: ${({ progress }) => `${progress}%`};
  height: 5px;
  background-color: #0066ff;
  transition: width 0.3s;
`;

---

 

실제 구현 화면