如何修复菜单：激活状态下禁止页面滚动？

你之前给菜单元素加position: fixed导致布局混乱，问题出在fixed定位会改变元素的定位上下文，让页面里用absolute定位的元素（比如导航链接、阴影层）的参照对象发生变化，从而出现元素错位的情况。

下面是不会破坏原有布局的解决方案：

核心思路 #

不给菜单加fixed，而是通过给<body>添加/移除类的方式来控制页面滚动，这样既不会影响菜单的原有布局，又能实现禁止滚动的效果。

1. 修改JavaScript代码 #

在菜单切换的逻辑里，同时给body切换一个控制滚动的类：

// Navbar
const hamburger_menu = document.querySelector(".hamburger-menu");
const nav_container = document.querySelector(".nav-container");
const body = document.body;

hamburger_menu.addEventListener("click", () => {
  nav_container.classList.toggle("active");
  body.classList.toggle("no-scroll"); // 新增：切换body的滚动状态
});

2. 添加CSS样式 #

给body的no-scroll类设置禁止滚动的样式，同时补偿滚动条宽度避免页面跳动：

/* 禁止页面滚动的样式 */
body.no-scroll {
  overflow: hidden;
  /* 补偿滚动条宽度，防止页面因滚动条消失而跳动 */
  padding-right: calc(100vw - 100%);
}

3. 保留原有代码 #

不需要修改你现有的HTML和其他CSS代码，这样菜单激活时，body会被禁止滚动，关闭菜单后恢复正常滚动，完全不会影响原有菜单的3D动画和布局。

内容的提问来源于stack exchange，提问作者Noa de Jong