Days on the Moon

この記事はCSS Advent Calendar 2022の1日目の分です。

HTMLのdialog要素を使うとモーダルダイアログを表現できます（使い方によってはモードレスダイアログも表現できます）。ただし、そのままだとモーダルダイアログを開いているときに、マウスホイールなどによってダイアログの背景（文書全体）までスクロールしてしまいます。

モーダルダイアログの背景をスクロールさせたくない場合、これを書いている現在のCSS仕様草案によれば、以下の記述で実現できるはずです（デモ）。

dialog {
  overscroll-behavior: contain;
}

しかしながら、この方法はChrome canary 110では期待通り動作しますがマウスホイールによるスクロールは防げますが、矢印キーやPageUp/PageDownキーによるスクロールは防げず、Firefox nightly 109では動作しません。

このあたりの事情はちょっと複雑で、

• CSS仕様草案によれば、overflow: autoな要素においてはスクロール可能な領域がないときもoverscroll-behaviorプロパティが適用されるはず。
  • CSS Overscroll Behaviorモジュール草案によれば、スクロールコンテナに対してoverscroll-behaviorプロパティが適用される。
  • CSS Overflowモジュール草案によれば、overflow: autoな要素（およびoverflow: hiddenな要素）はスクロール可能な領域がないときもスクロールコンテナである。
• 各ブラウザ（少なくともChromeの場合とFirefoxの場合）は、あえて仕様草案を無視し、スクロール可能な領域がないときにoverscroll-behaviorプロパティを適用しない。
  • しかし、Chromeはなぜか、dialog要素においてはスクロール可能な領域がないときもマウスホイールによるスクロールに関してはoverscroll-behaviorプロパティを適用する模様（そうなっている経緯は未調査）。
• CSS仕様草案に対して、スクロール可能な領域がないときはoverscroll-behaviorプロパティが適用されないようにしよう（仕様側を現状のブラウザ実装に合わせよう）という提案がなされている。
  • HTML標準に対して、モーダルダイアログの背景のスクロールを防止しようという提案があると教えてもらいました。

となっています。上述のCSSコードが将来的にも機能するかどうかは不透明です。

overflow: hiddenを使ってスクロールを防止する方法でも、:has疑似クラスと組み合わせることで、CSSのみでモーダルダイアログの背景のスクロールを防止できるそうです。