レスポンシブルで作成したサイトをスマホで見ると、スクロール時に左右にぶれる事への対処方法

あれ？どうするんだっけ？と本を開いたり、Webを漁ったりと情報集めしていくのがメンドイのでまとめました。ということで、あくまで自分の覚書です！なので説明が多々省かれています！ただ、同じようなニーズをお持ちの方は少なからずいると思うので、適宜参考にしていただければ幸いです。

気になるような、気になんないような・・・

レスポンシブルで作成したサイトをスマホで見たとき、スクロールすると、左右にぶれるというか、ずれるというかって事が起きていました。
何か変だなぁと思いつつも、まいっかで流していました。
ただ、無限スクロールで、どんどんスクロール出来るようにしたとき、この現象はとてもウザい。

多分、レイアウトしている要素の何かがはみ出してるものあるんだろうと分かっていても、どれかを特定するのは、とてもメンドイ・・・。

ということで、対処方法ないかと探していたら、ありました。

対処方法

#wrapperなどの大枠にあたる要素にoverflow:hidden;を記述するだけ！

#wrapper {
    font-size: 1.5rem;
    overflow: hidden;
}

はみ出たところは無視！って指示をしてるだけで、根本原因は放置・・・な対応ですが。テンプレを利用していたり、cssも色々定義し始めると何がどう影響してるのかを調べるのも大変になりがちなので、これで治るんだからOKですよね。

要は、クリッピングマスクしたってことですね。

参考サイト

上記対応だと不具合につながる場合ありでした

ということで、少し追記します。
画面の横ずれをなくしたいという趣旨で上記対応を紹介しましたが。
この場合、横方向だけでなく、縦方向にも「画面外を隠す」が効いてしまいます。

実際、小さいスマホの画面で見たときにタテ方向がスクロール出来ず画像表示が切れてしまうという現象が発生しました。

こういう場合は、隠す方向を限定してやる必要があるので、下記の設定で対応して下さい。

・横方向を隠す場合　→　overflow-x: hidden;
・縦方向を隠す場合　→　overflow-y: hidden;

以上、追記でした。