Vue.js의 ScrollBehavior가 CSS 때문에 움직이지 않을 때.

Vue.js에서 ScrollBehavior가 움직이지 않을 때의 노트입니다.
다음은 Vue Router의 설정 파일에 기록된 scrollBehavior 방법

scrollBehavior(to, from, savedPosition) { 
  return { 
    x: 0, 
    y: 0
  } 
}, 

나는 페이지가 이동하는 동시에 페이지의 맨 위로 돌아갈 것을 기대하고 있다
때로는 동작을 잘 하지 못하고, 때로는 페이지 맨 위로 이동하고, 페이지 중간에 있는 이상한 곳으로 이동한다.
웹 페이지를 극한 이상으로 스크롤하는 것을 좋아하지 않습니다. 공백 부분을 보십시오.
body 태그의 경우 CSS는 페이지 높이에서만 스크롤할 수 있도록 설정합니다
그게 원인인 것 같습니다.

해결 방법

CSS를 body 태그가 아닌 html 태그에 적용하도록 수정하면 ScrollBehavior가 올바르게 실행됩니다.

body{
  overflow-x: scroll;
  overscroll-behavior-y: none; 
  overscroll-behavior-x: none;
}

↓

html{
  overflow-x: scroll;
  overscroll-behavior-y: none; 
  overscroll-behavior-x: none;
}

원인

바디 라벨에 있는 "overflow-x"때문입니다.
따라서 CSS의 응용 목적지는 body 라벨이 아니라 html 라벨이다
바디 탭의 "overflow-x"주석을 통해 scrollBehavior를 정상적으로 실행할 수 있습니다.(이 때 바운드 스크롤을 제어할 수 없습니다.)
↓ Qiita의 초록색 제목에 흰색 부분이 보이지 않도록