网页侧边子菜单弹出时禁用滚动的JS代码失效排查求助

以下是针对你的代码在当前页面无法生效的常见排查方向及修复方案：

• DOM加载顺序问题
  若你的JS代码在DOM元素（USERINFO、login-subMenu等）加载前执行，getElementById会返回null，导致后续逻辑完全失效。另一页面可能恰好将JS放在了<body>末尾，或使用了DOM加载完成事件。
  修复：将JS代码包裹在DOM加载完成事件中，或移至<body>标签最后：

  document.addEventListener('DOMContentLoaded', function() {
    const USERINFO = document.getElementById("USERINFO");
    const subMenu = document.getElementById("login-subMenu");
    const closeButton = document.getElementById("closeButton");
    const html = document.documentElement;
  
    html.addEventListener("click", function(event) {
      if (!USERINFO.contains(event.target)) {
        subMenu.style.right = "-445px";
        html.classList.remove("dimmed");
        document.body.style.overflow = 'auto';
      } else {
        document.body.style.overflow = 'hidden';
        subMenu.style.right = "0"; // 补充：打开菜单时需显示子菜单
      }
    });
  
    subMenu.addEventListener("click", function(event) {
      event.stopPropagation();
    });
  
    // 新增关闭按钮事件
    closeButton.addEventListener('click', function() {
      subMenu.style.right = "-445px";
      html.classList.remove("dimmed");
      document.body.style.overflow = 'auto';
    });
  });
  

• 点击目标判断逻辑缺陷
  原代码用event.target !== USERINFO判断，若USERINFO内部有子元素（即使当前没有，后续修改或页面样式导致的隐性元素），点击时event.target会是子元素而非USERINFO本身，导致菜单无法正常打开。
  修复：改用contains方法判断点击区域是否在USERINFO内：

  if (!USERINFO.contains(event.target)) {
    // 关闭菜单逻辑
  } else {
    // 打开菜单逻辑
  }
  

• overflow属性被CSS覆盖
  当前页面可能存在优先级更高的CSS规则（如body { overflow: auto !important; }），导致JS直接设置的style被覆盖，滚动无法禁用。
  修复：改用类名控制滚动，避免直接操作行内样式：

  1. 添加CSS：

  body.no-scroll {
    overflow: hidden !important;
  }
  

  2. 修改JS：

  // 禁用滚动
  document.body.classList.add('no-scroll');
  // 恢复滚动
  document.body.classList.remove('no-scroll');
  

• 关闭按钮未绑定事件
  原代码未给closeButton添加点击事件，点击关闭按钮时，由于subMenu阻止了事件冒泡，html的点击事件不会触发，导致菜单无法关闭、滚动无法恢复。
  修复：添加关闭按钮的点击事件（如上述DOM加载示例中的代码）。

• 页面其他事件阻止冒泡
  当前页面可能存在其他元素的click事件使用了event.stopPropagation()，导致html的点击事件无法触发。可检查页面中其他JS代码，排查是否存在阻止事件冒泡到html层的逻辑。

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