Vue.jsのScrollBehaviorがCSSのせいで動かなかった時のこと

Vue.jsでScrollBehaviorが動かなかった時のメモ。

以下,Vue Routerの設定ファイルに記したscrollBehaviorメソッド

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

ページ遷移と同時にページの一番上まで戻ることを期待していたのですが、
時々うまく動作せず、ページの一番上では無い、ページの途中の変なところに移動してしまうことがありました。

Webページを限界以上にスクロールして、空白の部分が見えてしまうの(バウンススクロール)が嫌で
bodyタグに対して、ページの高さの中でのみスクロールが効くようにCSSで設定をかけていたのですが、
これが原因のようでした。

解決策

bodyタグではなく、htmlタグに対してCSSを適用するように修正すると、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;
}

原因

原因はbodyタグにかかる「overflow-x」でした。

なので、CSSの適用先をbodyタグではなくhtmlタグにするか、

bodyタグの「overflow-x」をコメントアウトすることで、scrollBehaviorを正常に動作させることもできました。（この場合バウンススクロールは制御できない）

↓Qiitaの緑のヘッダーの上の白い部分が見えないようにしたかった