body {
overflow:hidden;
}
この記述を加えると、コンテンツ量に関わらずブラウザのスクロールバーが消えて、
スクロールができなくなるというのは、よく知られたテクニック?の1つかと思います。
私も簡単なモーダルを実装するときによく使っています。
body.fixed {
overflow:hidden;
}
みたいな感じで、モーダルを出すときにbodyにclassを加えてoverflow:hidden;
にする簡単なものです。
何も考えずよく使っていたのですが、ふと疑問が湧きました。
なぜbodyにoverflow:hidden;
が指定されていると、ページのスクロールが無効になるのか?
たとえば高さが3000pxにおよぶコンテンツがあったとして、その場合のbody要素の高さも3000pxです。
3000pxの要素にoverflow:hidden;
がかかっていたところで高さは3000pxのまま。
ブラウザwindowの中にその高さを超えるコンテンツものがあったら、スクロールできるのが当然のように思えるのですが、実際にはそうはなりません。
body要素のoverflow:hidden;
はブラウザwindowそのものに指定したのと同じことになるということでしょうか?
これは別件で質問立てることなのかもしれませんが、
上記の方法で実装したモーダルで、特定の環境下のEdge*のみ、
モーダルを閉じたとき(overflow:hidden;を削除)に、
スクロール位置がページ下に落ちてしまう現象にぶつかりました。
それで実はoverflow:hidden;
のことをよくわかっていないことに気づき
投稿させてもらいました。
body に overflow:hidden; をあてるとなぜスクロールしなくなるのか?
詳しくわかる方がいたら教えてください。
よろしくお願いします。
*お客さんの閲覧環境でのみ発生していてどのような環境下のEdgeでそうなるのかわかっていません。