CSS 的跨浏览器替代品：有伪类

Question

我正在寻找一个跨浏览器兼容的 CSS 选择器，以防止打开模式时正文滚动。

目前，我将 CSS:has伪类与选择器一起使用：

body:has(dialog.active) {
  /* prevent scroll stuff*/
}

但是，Firefox 不支持此选择器。

是否有替代的 CSS 选择器可以达到相同的结果？请注意，我无法在页面上添加或修改任何 JavaScript 或 HTML，因此解决方案必须纯粹基于 CSS。

预先感谢您提供的任何帮助。

Answer 1

如果有一个替代选择器可以达到相同的结果，那么我们为什么需要呢:has？没有替代选择器。

\n

我们过去显示对话框的方式是用绝对定位的、部分透明的 覆盖屏幕<div>，然后让对话框出现在其中或前面。这可以防止人们点击对话框后面的页面。不确定它是否可以阻止滚动\xe2\x80\x94 我\xe2\x80\x99ve 没有研究过。

\n

我的建议是无论如何都要使用:has。Firefox 最终将添加支持，同时您的网页仍然可以在 Firefox 中使用，只是不如您\xe2\x80\x99d 那样可用。Firefox\xe2\x80\x99s的市场份额仅为3%。

\n