菜单打开时如何禁用body滚动？尝试代码未奏效

你之前的代码失效，是因为overlay并不是DOM元素style对象里的合法属性，浏览器完全不会识别这个设置哦~ 下面给你两种常用且有效的解决方案：

方法一：通过修改body样式禁用滚动（兼容桌面+移动端） #

这是最通用的方案，核心是设置body的overflow: hidden，针对iOS的特殊情况可以额外处理：

function openNav() {
  const body = document.body;
  // 基础禁用滚动
  body.style.overflow = 'hidden';
  
  // 可选：处理iOS Safari滚动穿透问题
  // 先记录当前滚动位置
  const scrollTop = window.scrollY;
  body.style.position = 'fixed';
  body.style.top = `-${scrollTop}px`;
  body.style.width = '100%';
  
  // 打开侧边栏
  document.getElementById("mySidenav").style.height = "50%";
}

function closeNav() {
  const body = document.body;
  // 恢复滚动
  body.style.overflow = '';
  
  // 可选：恢复之前的滚动位置和定位
  const scrollTop = parseInt(body.style.top || '0') * -1;
  body.style.position = '';
  body.style.top = '';
  body.style.width = '';
  window.scrollTo(0, scrollTop);
  
  // 关闭侧边栏
  document.getElementById("mySidenav").style.height = "0";
}

说明： #

• overflow: hidden会隐藏body超出视口的内容，直接阻止滚动；
• iOS Safari有时候会出现滚动穿透（即菜单打开后页面仍能滚动），这时候用position: fixed把body固定在视口，同时记录滚动位置，关闭时恢复，就能彻底解决问题。

方法二：通过事件监听阻止移动端滚动 #

如果不想修改body样式，仅针对移动端可以用这种方式，通过阻止触摸滚动的默认行为来禁用滚动：

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

function openNav() {
  document.getElementById("mySidenav").style.height = "50%";
  // 添加触摸滚动阻止事件，注意passive设为false才能生效
  document.body.addEventListener('touchmove', preventScroll, { passive: false });
}

function closeNav() {
  document.getElementById("mySidenav").style.height = "0";
  // 移除事件监听器，恢复滚动
  document.body.removeEventListener('touchmove', preventScroll);
}

说明： #

• 这种方法只对移动端触摸滚动有效，桌面端鼠标滚轮还是能滚动，所以如果要兼顾全平台，推荐用方法一；
• { passive: false }是必须的，否则部分现代浏览器会忽略e.preventDefault()。

更优雅的写法：用CSS类控制 #

把样式逻辑抽离到CSS里，通过添加/移除类来控制，代码更清晰易维护：

/* 定义禁用滚动的类 */
.no-scroll {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

function openNav() {
  document.body.classList.add('no-scroll');
  document.getElementById("mySidenav").style.height = "50%";
}

function closeNav() {
  document.body.classList.remove('no-scroll');
  // 恢复滚动位置（如果用了fixed定位）
  const scrollTop = parseInt(document.body.style.top || '0') * -1;
  document.body.style.top = '';
  window.scrollTo(0, scrollTop);
  document.getElementById("mySidenav").style.height = "0";
}

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