스크롤 맨 위로 올리기 with react-custom-scrollbars

무한 스크롤을 구현하고 나서 아이템을 많이 불러왔을 때, 맨 위로 올리는 버튼이 있으면 좋겠다는 생각이 들었다. 그래서 맨 위로 올라가는 버튼을 만들려고 했는데 스크롤을 다루기가 은근히 까다로워서 글로 기록하려 한다. 

사용한 라이브러리는 "react-custom-scrollbars"이다. useRef도 같이 사용해서 구현했다.

구현 설계

1. 스크롤이 어느 정도 내려가고 나서 위로 올라가는 버튼이 나타난다.

2. "/"와 "/searchitem" 경로에서만 버튼이 나타나도록한다.

구현

const App = () => {
  const { pathname } = useLocation();
  const ref = useRef<Scrollbars>(null);

  const [positionY, setPositionY] = useState(0);
  const handleScroll = (e: any) => {
    setPositionY(e.target.scrollTop);
  };

  const onScrollTop = () => {
    ref.current?.scrollTop(0);
  };

  return (
    <Scrollbars ref={ref} onScroll={handleScroll}>
      <StatusBar />
      
      // 내용들..
      
        {positionY > 1000 &&
          (pathname === "/" || pathname.slice(0, 11) === "/searchitem") && (
            <ScrollTop onClick={onScrollTop}>
              <FaArrowUp />
              <span>TOP</span>
            </ScrollTop>
          )}
    </Scrollbars>
  );
};

1. Scrollbars 컴포넌트에서 onScroll(handleScroll)을 통해 스크롤의 현재 px를 알아내서 postionY에 저장했다.
2. ref를 Scrollbars에 설정하고 onScrollTop을 이용하여 스크롤이 맨 위로 올라가게 했다.
3. positionY가 1000px을 넘고 pathname이 "/"이거나 "/searchitem"이면 위로 올라가는 버튼이 보이도록 했다.

구현 결과