상황
페이지를 이동할 때마다 자동으로 스크롤을 최상단으로 이동시키려 했다. 이를 위해 window.scrollTo(0,0)을 사용했지만 제대로 작동하지 않았다.
해결
구글 검색어 : why is not window.scrollTo working
Solution:
html { height: 100%; overflow:auto; } body { height: 100%; }
작업 중이던 코드의 index.css 파일에도 body {overflow-x:hidden}이 걸려있었다. 모바일 모드일 때 화면 우측에 빈 여백이 남아서 추가된 코드였다.
페이지네이션은 PC 기준으로 작업하고 있었기에 @media로 분리된 PC CSS에서는 해당 코드를 제거하였다.
이후 다시 테스트하자 정상적으로 작동하였다.
해결!✨
+ 추가
index.css 파일은 굉장히 큰 단위의 css이고, 더구나 body 전체에 {overflow-x: hidden}을 걸어야 한다면 어딘가 잘못 구현된 컴포넌트가 있다는 뜻으로 이해했다. (굳이 자식 컴포넌트가 부모 컴포넌트의 영역 밖으로 넘어갈 이유가 없었다.)
코드를 확인해보니 배너 부분의 css가 잘못되어 있었고 이를 해결하자 우측 여백은 없어졌다.
따라서 해당 코드도 사용할 필요가 없어졌기에 아예 코드에서 제거할 수 있었다!🎉🎉🎉
