モーダルを表示している時、手前のレイヤーのスクロールが下までいくと後ろのレイヤーがスクロールしてしまう問題
いままで、bodyにposition: fixedつけたり、overflow: hiddenつけたりしていたが、overscroll-behaviorで解決できることを知ったので調べる
overscroll-behaviorは、スクロール領域の境界に達したときにブラウザーが何をするかを設定するCSSプロパティ
使える値
- auto
デフォルト値。これまで通り、スクロール連鎖を止めず、手前のレイヤーが終端までいったら後ろのレイヤーがスクロールする。 - contain
この値が設定された要素の内部のみスクロールされ、後ろのレイヤーはスクロールしないようにできる。 - none
containに加えてバウンススクロールも抑制する。バウンススクロールとはスクロールが終端まで達した時に上部にbody要素がチラ見えするやつ。
iOS Safariでは使えないみたいなのでデスクトップPCのモーダルで使うことを検討したい
