【html/CSS】スクロールできない原因と解決方法
「サイト全体をスクロールできないんだけど!?」
「ここをスクロールさせたいのになぜかできない!?」
スクロールできない原因と解決方法を解説します。
目次
overflow:hiddenは、はみ出た要素を隠すCSSです。そのときスクロールは発生しません。
htmlタグかbodyタグにoverflow:hiddenを指定してしまうと、ブラウザからはみでる要素をスクロールを発生させずに隠してしまいます。
overflow:hiddenを削除しましょう。
overflow:hiddenを使いたいのであれば、bodyの内側にdivを作りそれにoverflow:hiddenを指定しましょう。
divにoverflow:hiddenを指定した場合はサイト全体のスクロールは可能です。
※divにheightは指定しない場合
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【特定の範囲】中身が高さや幅を超えていないから
特定の範囲をスクロールさせたく「overflow:auto」を指定したのにスクロールが発生しないとき、そもそもその中身が枠を超えていない可能性があります。
「overflow:auto」は中身が枠を超えたらスクロールバーを表示させ、スクロールさせるCSSです。
逆に言えば中身が超えなければスクロールしません。
スクロールさせるには下記の条件が必要です。
- 親要素にoverflow:autoを指定
- 親要素のwidthまたはheightを制限する
- 子要素のwidthまたはheightが親要素より大きい
横方向にはみ出させたいとき
親要素は何も指定しないとwidth:autoで横幅に上限があります。
子要素も何も指定しないとwidth:100%で親要素と同じ幅になり、はみ出ません。
子要素にwidth:200%など、親要素より横幅が大きくなるように調整しましょう。
「white-space:nowrap」を指定して改行させない手もあります。
縦方向にはみ出させたいとき
親要素は何も指定しないとheight:autoで縦に無制限に伸びていきます。
よって親要素にheightを数字で指定して範囲を限定する必要があります。
子要素は内容がいっぱいになると縦方向に自動で伸びるため、heightの指定は不要です。
【特定の範囲】overflowが効いていないかも
overflowの指定方法や仕様を勘違いしてちゃんと効いていない可能性もあります。
下記記事を見て確認してみてください。
【まとめ】スクロールできない原因と解決方法
サイト全体がスクロールできないとき
htmlかbodyにoverflow:hiddenを指定しているから
→bodyの内側にdivを作りそれにoverflow:hiddenを指定する
特定の範囲がスクロールできないとき
中身が高さや幅を超えていないから
→親要素の縦横を制限して子要素をそれより大きくする
その他の原因
overflowが効いているか確認する
以上、スクロールできない原因と解決方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
