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の緑のヘッダーの上の白い部分が見えないようにしたかった