下拉菜单打开时鼠标位于菜单外区域垂直滚动失效如何解决

问题根源 #

滚动异常的核心原因是全屏fixed定位的#page_blocker默认会拦截所有作用于其区域内的鼠标交互，包括滚轮事件。遮罩本身无滚动容器，滚轮事件落在遮罩上时会被直接拦截，无法冒泡到页面实际滚动容器，因此遮罩区域无法触发页面滚动；而#content_dropdown层叠等级高于遮罩，滚轮事件落在菜单区域时不会被遮罩拦截，可正常传递到滚动容器，因此菜单区域滚动正常。
全局设置height: 100%是适配移动端的合理方案，和本次滚动问题无关，无需调整。

修复方案 #

保留现有DOM结构和布局逻辑，仅需微调CSS和少量JS即可解决问题，核心是让遮罩只承担视觉遮罩作用，不拦截滚动事件，同时保留点击外部关闭菜单的交互：

• 给#page_blocker添加pointer-events: none，让鼠标事件（包括滚轮）可以直接穿透遮罩作用于下层页面，从根源解决遮罩拦截滚轮的问题，该属性不会影响遮罩的半透明显示效果。
• 给层叠等级更高的#btn_dropdown、#content_dropdown添加pointer-events: auto，覆盖穿透规则，保证两个元素自身的鼠标交互可以正常响应。
• 将原绑定在遮罩上的点击关闭逻辑，改为全局点击判断：菜单打开时监听document层级的点击事件，若点击目标不在按钮和菜单范围内则关闭菜单，关闭后移除监听避免冗余内存占用。
• 给按钮的打开事件添加阻止冒泡逻辑，避免点击按钮打开菜单时，事件冒泡到document立即触发关闭。

修改后的CSS（原有未提及的规则保持不变即可） #

#btn_dropdown {
  margin: 0 auto;
  text-align: center;
  width: 100px;
  padding: 1rem;
  background-color: skyblue;
  cursor: pointer;
  pointer-events: auto;
}
#content_dropdown {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  z-index: 10;
  background-color: orange;
  pointer-events: auto;
}
#page_blocker {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

修改后的JS #

const btn_dropdown = document.getElementById("btn_dropdown");
const content_dropdown = document.getElementById("content_dropdown");
const page_blocker = document.getElementById("page_blocker");

function closeDropdown() {
  page_blocker.classList.remove("open");
  content_dropdown.classList.remove("open");
  document.removeEventListener("click", handleOutsideClick);
}

function handleOutsideClick(e) {
  if (!content_dropdown.contains(e.target) && !btn_dropdown.contains(e.target)) {
    closeDropdown();
  }
}

btn_dropdown.addEventListener("click", (e) => {
  e.stopPropagation();
  const isOpen = content_dropdown.classList.contains("open");
  if (isOpen) {
    closeDropdown();
    return;
  }
  page_blocker.classList.add("open");
  content_dropdown.classList.add("open");
  document.addEventListener("click", handleOutsideClick);
});

HTML部分不需要任何改动。

修复后表现 #

• 半透明遮罩视觉效果完全保留
• 鼠标在菜单区域、遮罩区域均可正常触发页面垂直滚动
• 点击菜单外部区域可正常关闭菜单
• 点击按钮可正常切换菜单展开/收起状态
• 完全兼容现有移动端height:100%布局，不会引入100vh的移动端兼容性问题

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