본문 바로가기
Frontend/React

[React] 페이지 이동시 scroll 복귀

by YERIEL_염주둥 2021. 5. 20.
728x90

history.push를 통해서 page를 이동하는 과정에서 scroll이 아래에 있는 경우 페이지 이동 할 때 그대로 유지가 되는 문제를 발견

어떻게 하면 좋을까 고민하다가

useEffect를 사용해서 component 렌더링시 스크롤을 위로 복귀 시키는 코드 추가

import React, {useEffect} from 'react';

const ScrollOn = ()=>{
  useEffect(()=>{
  	document.getElementById('scroll-container').scrollTop=0;
  },[])

  return (
    <div id='scroll-container' style={{overflow-y:'scroll'}}>
      <div>
      	scroll on
      </div>
    </div>
  )
}

id가 scroll-container인 div는 scroll이 생기는 div이고 이 div를 찾아 스크롤 위치를 0으로 지정 해주면 간단히 끝

 

반응형

댓글