スマホページを作成する際は、横スクロールを出さないようにすることが多いと思いますが、何かはみ出す要素があり、それをoverflow-xで横スクロールを出ないようにしようとした時に詰まったのでその時のメモです。
overflow-xとは
まず、overflow-xとは横幅が決まっている要素の指定した範囲外の表示方法を決めるプロパティです。
overflowはよく使いますが、それの横だけに効くイメージです。
効かない場合の対策
このoverflow-xを使って横幅をはみ出ないようにしようと思ったのですが、上手く効かず調べたら以下のページが見つかりました。
こちらには対処法として、
body {
position: relative;
overflow-x: hidden;
}のようにposition: relative;を追加するというものでした。ただ試してみたところ再現環境が違うのか解決せずでした。
ダメだった場合
いろいろ試してみてダメだったので、結局全体を覆うdivを作成し、そちらに
overflow: hidden;を使いました。
とりあえずoverflow-xがどうしても効かない場合はこちらの方法を最終手段として覚えておくといいと思います。
コメント