响应式菜单遮罩激活时如何禁用页面滚动

CSS 配置 #

先定义一个控制滚动的类，覆盖页面默认滚动行为：

.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

JavaScript 逻辑 #

在菜单的打开/关闭事件中，动态给body添加/移除上述类，同时处理滚动位置避免页面跳顶：

// 根据你的实际元素ID/选择器调整
const overlay = document.getElementById("overlay");
const openMenuBtn = document.querySelector(".open-btn");
const closeMenuBtn = overlay.querySelector(".close-btn");

let savedScrollPos = 0;

// 打开菜单时禁用滚动
openMenuBtn.addEventListener("click", () => {
  // 记录当前滚动位置
  savedScrollPos = window.scrollY;
  // 添加禁用滚动类
  document.body.classList.add("no-scroll");
  // 固定body位置，防止页面跳至顶部
  document.body.style.top = `-${savedScrollPos}px`;
  // 显示overlay菜单
  overlay.style.display = "block";
});

// 关闭菜单时恢复滚动
closeMenuBtn.addEventListener("click", () => {
  // 隐藏overlay菜单
  overlay.style.display = "none";
  // 移除禁用滚动类
  document.body.classList.remove("no-scroll");
  // 恢复之前的滚动位置
  window.scrollTo(0, savedScrollPos);
  // 清除body的top样式
  document.body.style.top = "";
});

关键细节 #

• 仅用overflow: hidden在部分移动端浏览器可能失效，配合position: fixed能覆盖更多设备场景
• 保存并恢复滚动位置，避免用户关闭菜单后页面跳回顶部，提升体验
• 如果你的菜单是通过CSS类切换显示（比如overlay.active），可以把滚动控制逻辑直接整合到类切换的代码中，比如添加active类时同步给body加上no-scroll

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