モーダルを立ち上げたとき、背景がスクロールする

Question

cssの素朴な疑問なのですが、

【pug】

body
 header(style={height:'50px';width:'100%';'z-index':'2';})
 div.contents(style={'min-height':'100%';width:'100%';'z-index':'1';position:'relative'})
 div.modal(style={'min-height':'460px';width:'100%';'z-index':'19999';position:'fixed';top:'0';left:'0';right:'0';bottom:'0';})

このような構造があるとします。
現在の構造の順番は下のレイヤーから
div.contents → header → div.modal
というふうになっていると思います。

ですが、div.modalをスクロールしていると、下ののレイヤーを捕まえて
div.contentsがスクロールしてしまうバグが起こります。
これは一体なぜ起こるのでしょうか。

もちろん、このバグを解消するために、bodyにposition: fixed; overflow: hidden;を
書けば解消されることはわかっています。

教えていただきたいです。

Answer 1

下ののレイヤーを捕まえて

div.contentsがスクロールしてしまうバグ

そもそもcssでやるモーダルは疑似モーダルであってモーダルではないからです。
その昔つかわれていた本当のモーダルウィンドウ処理では正しいモーダルが実装できましたが
ブラウザ間の仕様一致ができずに、使用禁止になりました。

Comments

[hosodaaaaa]

回答していただき、ありがとうございます。

> 疑似モーダルであってモーダルではないからです。
それでは、疑似モーダルだとバグの改修はできないということでしょうか。

[yambejp]

いえ、バグではなく仕様ということです
仕様なので追加仕様をかけば想定の動作をさせることもできます