【CSS】縦スクロールが表示されると横スクロールが出現してしまう理由と対策
2021/2/13
2021/10/5
3623 views
横スクロール出てしまう対策
以前どつぼにはまって苦労したのでメモを残します。
謎の20ピクセルぐらいの横スクールの出現
サイトコーディング中に、ふと気付くと横スクロールバーが表示されていました。
その幅わずか20pxほど。
何かボックス要素のpaddingかmarginが出ているのかと思いソースを確認しても特に問題なし。
要因は縦のスクロール分の隙間
いろいろ試行錯誤した結果、縦スクロールの分がはみ出ていることが要因と分かりました。
いつから出るようになっていたか分からずどのコードが間違いなのか見つけ出すのにかなり苦労しました。
原因は「width: 100vw;」
でもhtmlもbodyもwidth100%にしているのになぜなんだ。と思い、必死に調べた結果。
とある要素で使っていた「width: 100vw;」というプロパティのせいでした。
これをwidth: 100%;にするか、削除すれば直りました。
まとめ
以上が縦スクロールが表示されると横スクロールが出現してしまう原因の解説でした。
親要素の横幅を越えてコンテンツを幅いっぱいにできる「width: 100vw;」ですが、このようなデメリットがあるので使い方は難しいですね・・・。
この記事へのコメント
- まだ書き込みはありません