2021.08.01
페이지 이동시 스크롤 유지 없애기
페이지를 새로고침하거나 뒤로가기/앞으로가기를했을때 기본적으로 브라우저는 스크롤의 위치를 기억했다가 이동시켜준다.
이를 방지하고싶은경우 2가지방법이있다.
window API
window.scrollTo(0,0);
위 코드를 알맞은 라이프사이클에 넣으면된다.
대략 정리하면 아래정도로 되는데, 사실 정확하지않다.
-
VanilaJS: loaded
loaded는 DOMtree 생성과 resource의 load는 보장하지만 rendering에 대한 보장은 하지않는다. -
VueJS: mounted
nextTick을 이용해 확실한 rendering 시점을 보장할 필요가 있다. -
ReactJS: useEffect or useLayoutEffect
rendering이 이루어진 후에 호출되는 콜백으로 괜찮다.
데이터 매핑까지 기다리고싶다면 useLayoutEffect 콜백을 사용한다.
history API
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
https://developer.mozilla.org/ko/docs/Web/API/History/scrollRestoration
Author And Source
이 문제에 관하여(2021.08.01), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ginameee/20210801저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)