移动端下拉菜单打开时页面滚动的最优解决方法及问题排查

首先，你遇到的这个问题在移动端开发里挺常见的，核心原因有两个：一是部分移动端浏览器（尤其是iOS Safari）对body单独设置overflow:hidden的支持不彻底；二是触摸事件穿透到了下层的可滚动页面区域，导致菜单触发时页面跟着滚动。结合你提到的重叠触摸区域问题，下面给你一套完整的最优解决方案：

1. 修复滚动锁定的CSS（解决overflow:hidden无效问题） #

只给body加overflow:hidden在很多移动端设备上不生效，需要同时锁定html和body，并固定高度避免页面偏移：

.body-overflow {
  overflow: hidden;
  height: 100%;
  position: fixed; /* 额外添加fixed定位，彻底锁定页面 */
  width: 100%;
}
/* 同时处理html元素 */
.body-overflow html {
  overflow: hidden;
  height: 100%;
}

2. 用z-index提升菜单层级+阻止触摸穿透 #

你提到的重叠可触摸区域问题，z-index确实能解决层级覆盖，但还要配合阻止菜单区域的触摸滚动事件，避免事件冒泡到页面：
首先给菜单容器设置定位和足够高的z-index（确保在页面内容之上）：

.mobile-toggle {
  position: relative; /* 定位是z-index生效的前提 */
  z-index: 9999; /* 数值足够大，保证菜单在最上层 */
}

然后修改你的JS函数，添加触摸事件拦截：

function myFunction(x) {
  x.classList.toggle("change");
  const body = document.body;
  
  // 切换滚动锁定状态
  if (body.classList.contains('body-overflow')) {
    body.classList.remove('body-overflow');
    // 移除触摸事件监听（避免解锁后菜单无法正常交互）
    document.querySelector('.mobile-toggle').removeEventListener('touchmove', preventScroll);
  } else {
    body.classList.add('body-overflow');
    // 添加触摸事件监听，阻止菜单区域的滚动行为
    document.querySelector('.mobile-toggle').addEventListener('touchmove', preventScroll, { passive: false });
  }
}

// 封装阻止滚动的函数
function preventScroll(e) {
  e.preventDefault();
}

3. 额外优化：避免解锁后页面跳位 #

锁定滚动时有些浏览器会让页面回到顶部，解锁后体验很差，可以在锁定前记录滚动位置，解锁后恢复：

let scrollTop = 0;

function myFunction(x) {
  x.classList.toggle("change");
  const body = document.body;
  
  if (body.classList.contains('body-overflow')) {
    // 解锁滚动，恢复之前的位置
    body.classList.remove('body-overflow');
    window.scrollTo(0, scrollTop);
    document.querySelector('.mobile-toggle').removeEventListener('touchmove', preventScroll);
  } else {
    // 锁定滚动，记录当前滚动位置
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    body.classList.add('body-overflow');
    document.querySelector('.mobile-toggle').addEventListener('touchmove', preventScroll, { passive: false });
  }
}

function preventScroll(e) {
  e.preventDefault();
}

关于z-index的作用补充 #

z-index确实能解决重叠区域的层级问题，确保菜单在页面内容上方，但它只能解决视觉覆盖，不能直接阻止触摸事件穿透——所以必须配合touchmove事件的preventDefault，才能真正阻止页面跟着滚动。

按照这套方案修改后，应该就能彻底解决你遇到的问题了。

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