🪟
cssでモーダルの背景をスクロールさせないようにする
はじめに
一昔前はモーダルの背景をスクロールさせないようにするのは結構面倒だった。
CSS だけでそれを実現できるので備忘録的に残す ✏️
DEMO
解説
下記 css が肝である
css で:has が使えるようになったことで dialog タグが open かどうかで style を変えることができるようになった
/* モーダル開時に背景のスクロールを防ぐ */
html:has(dialog[open]) {
overflow: hidden;
}
おわりに
ここ数年で昔は js を使用しないとできなかったことが css だけでできるようになってきた
変化は著しいが、置いていかれないように頑張りたい、、、！
Discussion