Frontend/React
[React] 페이지 이동시 scroll 복귀
YERIEL_염주둥
2021. 5. 20. 21:58
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으로 지정 해주면 간단히 끝
반응형