在现代CSS中如何利用:has()实现抽屉菜单展开时页面滚动锁定-css教程-PHP中文网

:has()无法实现抽屉菜单滚动锁定，因其不支持@media内使用、不能选择祖先元素、浏览器直接忽略overflow等样式变更；可靠方案是#menu-toggle:checked ~ body或html.is-drawer-open body配合JS切换类名。

在现代css中如何利用:has()实现抽屉菜单展开时页面滚动锁定

:has() 无法实现抽屉菜单展开时的页面滚动锁定。 它既不能向上选择 body，也无法触发 overflow: hidden 这类影响盒模型与滚动行为的样式变更——浏览器会直接忽略此类尝试。

你可能会写出类似这样的 CSS：

@media (max-width: 768px) {
  body:has(#menu-toggle:checked) {
    overflow: hidden;
  }
}

但它不会生效，原因很实在：

:has() 不允许出现在 @media 规则内部，Chrome 125+、Safari 17.5、Firefox 126 均明确不支持，整条规则被丢弃
:has() 选择器本身不能作为“状态触发器”去修改祖先元素（如 body）的 overflow、position 或尺寸属性
即使写成 html:has(#menu-toggle:checked) body，CSS 选择器语法也不允许这种跨层级的祖先匹配

它们都绕开 :has()，靠 DOM 顺序和兄弟/相邻选择器驱动：

用 #menu-toggle:checked ~ body —— 要求是的**同级前驱节点**（即放在开始标签后、其他内容之前），且 body 必须设 display: block（默认就是）
用 html.is-drawer-open body —— 通过 JS 切换上的类名，CSS 完全解耦，无 DOM 位置依赖，推荐用于复杂项目

后者更健壮：document.documentElement.classList.toggle('is-drawer-open') 配合 .is-drawer-open body { overflow: hidden; }，无兼容性风险，也避免了 body 内联样式污染。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

滚动锁定只是配套动作，抽屉本身必须用 transform 才能保证性能。关键点都在 DOM 和 class 上：

放在最开头，紧贴标签后
作为汉堡按钮，和遮罩层紧随其后，三者同级
CSS 中写 #menu-toggle:checked ~ .drawer { transform: translateX(0); } 和 #menu-toggle:checked ~ body { overflow: hidden; }


遮罩层必须是 ，不是 ，否则点击无法取消选中
移动端真机测试时，别忘了加 height: 100dvh 替代 100vh，防止 Safari 地址栏收缩导致遮罩漏底。
最常被忽略的是：滚动锁定必须作用于 body（或 html），而不是抽屉容器本身；而 :has() 连这个最基本的前提都做不到。

在现代CSS中如何利用:has()实现抽屉菜单展开时页面滚动锁定