13
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でそうなるのかわかっていません。

0

1 件の回答 1

18

overflowプロパティがbody要素に対して設定された場合、そのoverflowプロパティの値は、html要素 (ルート要素) に適用されます。そして、ルート要素に設定されたoverflowプロパティの値は、ビューポートへと適用されます1

11.1.1 Overflow: the 'overflow' property

UAs must apply the 'overflow' property set on the root element to the
viewport. When the root element is an HTML "HTML" element or an XHTML
"html" element, and that element has an HTML "BODY" element or an
XHTML "body" element as a child, user agents must instead apply the
'overflow' property from the first such child element to the viewport,
if the value on the root element is 'visible'.

ビューポートとは、簡単にいえば、「ブラウザのウインドウに表示されている領域」を指します2。ここにoverflow: hiddenが適用されたことにより、body要素内に存在する内容は、ビューポートのサイズに合わせて切り取られ、スクロールバーが表示されなくなります。

ただし、overflow: hiddenを設定したとしても、そのボックスはスクロールコンテナであることに注意してください。スクロールコンテナであるため、依然として JavaScript を用いるなどの方法でスクロールが可能となります。

CSS Overflow Module Level 3 にて追加されたclip値を使用すると、スクロールコンテナではないボックスとすることが出来ますが、 2019 年 4 月 25 日現在、clip値をサポートしているブラウザはありません3


参考:

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。