如何在菜单展开时禁止页面Body滚动？

架构老林

2026-6-24

解决移动端菜单展开时页面同步滚动的问题

问题根源

移动端菜单采用fixed定位占满视口，但页面的body/html仍保持滚动状态，滚动菜单时会触发页面的滚动行为；直接给body添加overflow:hidden会导致非菜单状态下页面无法正常滚动。

解决方案

1. 让菜单独立滚动

修改移动端菜单的overflow属性，确保菜单内容超出视口时自身可滚动，而非触发页面滚动：

@media (max-width: 920px) {
  nav ul {
      /* 保留原有属性，替换overflow值 */
      overflow-y: auto;
      /* 可选：隐藏滚动条优化视觉（按需启用） */
      scrollbar-width: none; /* 适配Firefox */
  }
  /* 适配Chrome/Safari/Edge的滚动条隐藏 */
  nav ul::-webkit-scrollbar {
      display: none;
  }
}

2. 动态锁定/解锁页面滚动

由于CSS无法通过子元素状态控制body样式，添加少量JS监听菜单开关状态，动态切换页面滚动权限：

const menuToggle = document.getElementById('click');
let savedScrollPos = 0;

menuToggle.addEventListener('change', function() {
  if (this.checked) {
    // 记录当前滚动位置，避免菜单展开时页面跳顶
    savedScrollPos = window.scrollY;
    // 锁定页面滚动
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.top = `-${savedScrollPos}px`;
    document.body.style.width = '100%';
  } else {
    // 恢复页面滚动权限
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.top = '';
    // 回到菜单展开前的滚动位置
    window.scrollTo(0, savedScrollPos);
  }
});