【CSS】htmlやbodyにoverflow: hidden;をするとスクロールできなくなる

overflowとは

overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定します。
cssでよく使うやつですね。

styles.css

.box {
  /* 初期値。はみ出た部分はそのまま表示される。 */
  overflow: visible;

  /* はみ出た部分が非表示。 */
  overflow: hidden;

  /* はみ出た部分が非表示。その中でスクロールできる. */
  overflow: scroll;

  /* ブラウザにより表示が変わる（基本的にはスクロールできる状態に） */
  overflow: auto;
}

じゃあbodyに当てればはみ出た部分消してくれるってこと？

ふーん、便利じゃん。

styles.css

body {
  overflow: hidden;
}

これでレスポンシブして要素がはみ出ても変な余白ができたりしないはず！
しかし、別の問題が発生します。

あれ？スクロールできなくなったんだけど？？？

bodyにoverflow: hidden;してしまうとビューポートへ適用されてしまいます。
ビューポートとは、簡単にいえば「ブラウザのウインドウに表示されている領域」を指します。
つまり、表示されている領域からはみ出るすべての要素が非表示になってしまうのです。

##　解決策

styles.css

body {
  overflow: scroll;
}

ここまで読んでくださった君のような勘のいい方はもうお気づきですね。

bodyにoverflowするときはscrollにしましょう。

スクロールできて要素がはみ出たときに変な余白を消すことができます。

逆に言えばoverflow: hidden;使えばスクロールさせない

モーダルを作るときとかは使えるテクニックですね。