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으로 지정 해주면 간단히 끝
반응형
'Frontend > React' 카테고리의 다른 글
React Quill Image Resize Code (2) | 2021.08.19 |
---|---|
[React] Html2Canvas를 이용하여 화면 캡쳐하기 (0) | 2021.07.20 |
React Material-UI Sort Table Custom Hook 이용하기 (0) | 2021.05.11 |
[React] 라이브러리 없이 Div Slideshow 구현하기 (0) | 2021.04.30 |
React-Quill Image resize (13) | 2021.04.22 |
댓글