縦長のモーダルをスクロールする

Popover APIまたはdialog#showModal()で表示したdialog要素、::backdrop疑似要素はともにposition: fixedなのでBootstrapのようなスクロールができない。

user agent stylesheetを上書きしてposition: relativeにすれば全体をスクロールできるようになるが、裏のコンテンツもスクロールしてしまう。 Bootstrapのようなスクロールを実現するには、Popover APIやdialog#showModal()を使わずに自力で実装する必要がありそう。

ちなみに dialog要素内は overflow: auto にすればスクロールできる。

+---------------+ <-┐
|  ::backdrop   |   | window#height
|   +-------+   |   | ::backdropは疑似要素
|   | Modal |   |   |
|   |       |   |   |
|   |       |   |   |
+---|       |---+ <-┘
    |       | <-┐
    +-------+ <-┘この部分は表示できない

/* user agent stylesheet */
dialog {
  position: fixed;
}

::backdrop {
  position: fixed;
}