codingDesignWordpress

スマホサイトの横振れをなくす

By 2020年7月8日No Comments

下にまっすぐスクロールしたいのに左右へふらつくのを修正したい。

下にスクロールしようとした瞬間に期待してない方向へずれるのノイズを感じてしまうので体験としてよくない。

こちらのブログは横ぶれはなかったがほかのサイトで修正することに。

原因は画面サイズよりも大きいものが含まれるとそういった現象になるのでまずその要素を探す。

直し方はchromeでは右クリックから検証を選びデベロッパーツールを表示させる。

そしてひとつひとつ要素を確認し横幅サイズと合わないものがないかを探す。

わかりやすいこちらの説明を参考にすすめる。

「スマホ表示で画面が横スクロールする現象の原因と直し方」https://www.1-firststep.com/archives/7059

それでも自分の場合つまづてしまったのは横幅を超える要素がすぐにはみつからなかった。

トップメニューバーがスクロールした際に画面と一緒に追従する部分の横幅が変わっていたので最初のトップメニューバーのサイズを見ただけではわからなかった。

なので画面を動かすと要素の大きさがwordpressのテーマの仕様によって変わってしまうことがあるので見つからない方は画面を動かしつつ探してみるのをお勧めする。

スクロールの一によってjsの動作でcssのclassが変わってしまっていたので今回はそのcssを上書きする形で修正した。