【CSS】縦スクロールが表示されると横スクロールが出現してしまう理由と対策

2021/2/13

2021/10/5

372 views

横スクロール出てしまう対策

以前どつぼにはまって苦労したのでメモを残します。

謎の20ピクセルぐらいの横スクールの出現

サイトコーディング中に、ふと気付くと横スクロールバーが表示されていました。
その幅わずか20pxほど。
何かボックス要素のpaddingかmarginが出ているのかと思いソースを確認しても特に問題なし。

要因は縦のスクロール分の隙間

いろいろ試行錯誤した結果、縦スクロールの分がはみ出ていることが要因と分かりました。
いつから出るようになっていたか分からずどのコードが間違いなのか見つけ出すのにかなり苦労しました。

原因は「width: 100vw;」

でもhtmlもbodyもwidth100%にしているのになぜなんだ。と思い、必死に調べた結果。
とある要素で使っていた「width: 100vw;」というプロパティのせいでした。
これをwidth: 100%;にするか、削除すれば直りました。

まとめ

以上が縦スクロールが表示されると横スクロールが出現してしまう原因の解説でした。
親要素の横幅を越えてコンテンツを幅いっぱいにできる「width: 100vw;」ですが、このようなデメリットがあるので使い方は難しいですね・・・。

この記事へのコメント

  • まだ書き込みはありません

コメントを残す



関連記事

ページの先頭に戻る