스크롤 인디케이터

스크롤바를 최상단으로 고정하기

인디케이터란?
일의 현황/사정 변화 등을 나타내는 지표를 말합니다. 스크롤을 하면 상단에 게이지가 쌓이면서 어느정도 스크롤링이 됐는지를 보여주는 것입니다.

라이브러리 없이 구현하기..!

검색해서 여러가지를 보았지만 방법은 의외로 간단했습니다.

import React, { useEffect, useState } from 'react';
import './Indicator.scss';

const ScrollIndicator = () => {
  const [scrollTop, setScrollTop] = useState(0);

  const onScroll = () => {
    const winScroll = document.documentElement.scrollTop;
    const height =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;

    const scrolled = (winScroll / height) * 100;

    setScrollTop(scrolled);
  };

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

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

  return (
    <div className="scrollContainer">
      <div className="progressMainStyle" style={{ width: `${scrollTop}%` }} />
    </div>
  );
};

export default ScrollIndicator;

.scrollContainer {
  width: 100%;
  position: fixed;
  top: 70px;
  background: #fff;
  height: 2px;
  z-index: 100;

  .progressMainStyle {
    background: #222;
    height: 2px;
  }
}

scrollHeight
스크롤 시키지 않았을 때의 전체 높이를 구합니다.

clientHeight
눈에 보이는 만큼의 높이를 구합니다.

scrollTop
스크롤되어 올라간 만큼의 높이를 구합니다.

이것을 이제 컴포넌트로 만들어서 쓰는겁니다. 이것을 이제 퍼센트로 나눠서
scrollTop 에 퍼센트를 붙여서 width에 넣어서 적용합니다.