Angular导航栏打开时如何仅通过CSS实现body overflow hidden效果

结论 #

仅使用CSS能否实现需求，取决于你需要兼容的浏览器范围：

• 如果不需要兼容旧版本浏览器，可以直接用CSS实现
• 如果需要兼容2023年以前发布的老旧浏览器，仅靠CSS无法实现，需要配合少量JS逻辑

具体说明 #

1. 支持CSS :has() 选择器的场景（新浏览器兼容方案）

目前主流新版浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）都已经支持CSS父选择器:has()，可以直接通过子元素的类状态选中父级body，写法如下：

body:has(#navbar.opened-navbar) {
  overflow: hidden;
}

这段代码的作用是：当body内存在id="navbar"且带有opened-navbar类的元素时，自动给body设置overflow: hidden，完全符合你要的效果。

2. 需要兼容旧浏览器的场景

旧版本CSS没有父元素选择器，无法通过<nav>上的类名向上选中父级body，这种情况下你可以在Angular组件里加几行逻辑，监听isOpened变量的变化，动态给body增删类即可：

// 放在isOpened变更的逻辑后面
if (this.isOpened) {
  document.body.classList.add('opened-navbar');
} else {
  document.body.classList.remove('opened-navbar');
}

之后你原来写的CSS就可以直接生效了：

body.opened-navbar{
  overflow:hidden;
}

内容的提问来源于stack exchange，提问作者user13505963