子菜单展开禁用滚动与JS报错解决方法

✅ 正确做法是：始终校验 DOM 元素是否存在，再执行操作。以下是优化后的完整、健壮实现：

// 安全获取 DOM 元素（带存在性检查）
const USERINFO = document.getElementById("USERINFO");
const subMenu = document.getElementById("login-subMenu");
const html = document.documentElement;
const closeButton = document.getElementById("closeButton");
// ✅ 移除对不存在的 #navbar 的依赖；如需控制导航栏样式，请确保其存在或使用更可靠的定位方式（如 class 或父容器）

// 打开子菜单
if (USERINFO) {
  USERINFO.addEventListener("click", function(e) {
    e.stopPropagation(); // 防止触发 document 点击关闭
    if (subMenu) subMenu.style.right = "0";
    html.classList.add("dimmed");
    document.body.style.overflow = "hidden"; // ? 关键：禁用页面滚动
  });
}

// 全局点击关闭（排除子菜单和触发按钮自身）
if (html && subMenu && USERINFO) {
  html.addEventListener("click", function(event) {
    const isClickInsideSubMenu = subMenu.contains(event.target);
    const isClickOnTrigger = event.target === USERINFO;

    if (!isClickInsideSubMenu && !isClickOnTrigger) {
      if (subMenu) subMenu.style.right = "-500px";
      html.classList.remove("dimmed");
      document.body.style.overflow = "auto"; // ? 恢复滚动
    }
  });
}

// 关闭按钮
if (closeButton && subMenu) {
  closeButton.addEventListener("click", function() {
    subMenu.style.right = "-500px";
    html.classList.remove("dimmed");
    document.body.style.overflow = "auto";
  });
}

// 阻止子菜单内点击事件冒泡到 html（避免误关闭）
if (subMenu) {
  subMenu.addEventListener("click", function(event) {
    event.stopPropagation();
  });
}

? 关键注意事项：

• 永远检查元素是否存在：使用 if (element) 包裹所有依赖该元素的操作，避免 null 异常；
• 避免重复设置 overflow：document.body.style.overflow 是内联样式，优先级高，但需确保每次状态切换都显式还原；
• CSS 补充建议：为防 Safari 等浏览器兼容问题，可在 .dimmed 类中添加 touch-action: none，并确保 html, body { height: 100%; }；
• 无障碍友好：子菜单打开时，建议通过 aria-hidden="false" 和焦点管理（如 subMenu.focus()）提升可访问性。

总结：实现“子菜单展开时隐藏溢出”的核心不在复杂逻辑，而在于DOM 操作的防御性编程。移除无效引用、增加存在性判断、统一滚动控制入口，即可让交互稳定可靠，适配任意页面结构。

到这里，我们也就讲完了《子菜单展开禁用滚动与JS报错解决方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！