打开子菜单时隐藏页面overflow问题排查及解决求助

可能的失效原因 #

• DOM加载顺序错误：JS代码在页面DOM元素渲染前执行，导致getElementById获取不到元素，事件绑定失败。
• 事件冒泡逻辑冲突：点击USERINFO时事件会冒泡到html元素，触发其click事件，原有逻辑中打开菜单的overflow设置依赖html的click事件分支，时序易出问题；若USERINFO内部有子元素，event.target !== USERINFO的判断会失效，导致菜单意外关闭。
• Overflow作用对象不完整：仅设置document.body的overflow，部分浏览器需要同时设置document.documentElement（html标签）才能完全隐藏滚动条。

修正后的代码 #

HTML（保持原有结构） #

<div id="right_nav">
  <a id="USERINFO"> Help ></a>
</div>

<div id="login-subMenu">
  <button id="closeButton">Close X</button>
</div>

CSS（补充dimmed类样式） #

#login-subMenu {
  position: fixed;
  top: 0;
  right: -500px;
  width: 500px;
  height: 100%;
  background-color: #fff;
  z-index: 9000;
  transition: all 0.3s ease-out;
  padding: 10px;
}

.dimmed {
  background-color: rgba(0,0,0,0.5);
}

JavaScript（修复逻辑与加载问题） #

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
  const USERINFO = document.getElementById("USERINFO");
  const subMenu = document.getElementById("login-subMenu");
  const html = document.documentElement;
  const navbar = document.getElementById("navbar");
  const closeButton = document.getElementById("closeButton");

  // 统一打开菜单逻辑
  function openSubMenu() {
    subMenu.style.right = "0";
    html.classList.add("dimmed");
    navbar?.classList.remove("sticky");
    // 同时锁定html和body的滚动
    html.style.overflow = 'hidden';
    document.body.style.overflow = 'hidden';
  }

  // 统一关闭菜单逻辑
  function closeSubMenu() {
    subMenu.style.right = "-500px";
    html.classList.remove("dimmed");
    navbar?.classList.add("sticky");
    // 恢复滚动
    html.style.overflow = 'auto';
    document.body.style.overflow = 'auto';
  }

  USERINFO.addEventListener("click", function(event) {
    event.stopPropagation(); // 阻止冒泡到html，避免触发关闭逻辑
    openSubMenu();
  });

  // 点击页面空白区域关闭菜单
  html.addEventListener("click", closeSubMenu);

  closeButton.addEventListener("click", function(event) {
    event.stopPropagation(); // 阻止冒泡到html，避免重复执行关闭逻辑
    closeSubMenu();
  });

  subMenu.addEventListener("click", function(event) {
    event.stopPropagation(); // 点击菜单内部不触发关闭
  });
});

替代实现方式（CSS类控制更简洁） #

核心思路：用CSS类统一管理菜单状态和页面滚动，减少JS直接操作样式的代码

CSS新增样式 #

/* 页面滚动锁定类 */
.body-lock {
  overflow: hidden;
}

/* 菜单显示状态类 */
.login-subMenu--show {
  right: 0 !important;
}

简化版JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const USERINFO = document.getElementById("USERINFO");
  const subMenu = document.getElementById("login-subMenu");
  const navbar = document.getElementById("navbar");
  const closeButton = document.getElementById("closeButton");
  const body = document.body;

  USERINFO.addEventListener("click", (e) => {
    e.stopPropagation();
    subMenu.classList.add('login-subMenu--show');
    body.classList.add('body-lock');
    navbar?.classList.remove('sticky');
  });

  closeButton.addEventListener("click", (e) => {
    e.stopPropagation();
    subMenu.classList.remove('login-subMenu--show');
    body.classList.remove('body-lock');
    navbar?.classList.add('sticky');
  });

  document.documentElement.addEventListener("click", () => {
    subMenu.classList.remove('login-subMenu--show');
    body.classList.remove('body-lock');
    navbar?.classList.add('sticky');
  });

  subMenu.addEventListener("click", (e) => e.stopPropagation());
});

内容的提问来源于stack exchange，提问作者Thor The dog