[이슈] window.scrollTo(0, 0)이 작동하지 않는 경우

페이지네이션으로 페이지 이동 후,

화면의 스크롤읠 최상단으로 이동시키기 위해 아래의 코드를 작성했다.

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [list]);

의존성 배열에 list를 넣고 list가 변경되는 경우 스크롤을 최상단으로 이동하는 코드다.

 

그런데 작동이 되지 않는다.

이유는 아주 간단했지만 원인 파악에 꽤 시간을 소비했다.

내 경우 body에 over-flow 문제였다.

html,
body {
  max-width: 100vw;
  /* overflow-x: hidden; */
  height: 100vh;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
}

위의 over-flow-x를 주석처리하니 해결이 되었다.

브라우저는 over-flow-x: hidden 로 수평 스크롤을 막게 되는데 일부 브라우저는 수직 스크롤도 막히는 오류가 발생할 수 있다고 한다.