当响应式侧边菜单（如通过 checkbox 切换的全屏导航）打开时，页面仍可上下滚动，影响用户体验。本文提供纯 CSS + JavaScript 的可靠解决方案：通过动态切换 body { overflow: hidden } 阻止背景滚动，同时保持菜单内元素可交互、无视觉抖动。

当响应式侧边菜单（如通过 checkbox 切换的全屏导航）打开时，页面仍可上下滚动，影响用户体验。本文提供纯 css + javascript 的可靠解决方案：通过动态切换 `body { overflow: hidden }` 阻止背景滚动，同时保持菜单内元素可交互、无视觉抖动。

在实现移动端响应式导航菜单（尤其是使用 position: fixed 覆盖全屏的侧滑菜单）时，一个常见痛点是：菜单展开后，用户仍可滚动背后的 内容——这不仅造成视觉干扰，还可能导致误操作或布局错位。虽然直觉上给 body 添加 overflow: hidden 似乎可行，但若静态设置，会导致整个页面永久失焦滚动能力；而仅对 nav ul 设置 overflow: hidden 又因定位层级和渲染机制常被忽略，无法真正拦截文档滚动。

✅ 正确解法是动态控制 body 滚动状态：菜单打开时禁用 body 滚动，关闭时恢复。这需结合 HTML 结构、CSS 响应式规则与轻量 JavaScript 监听。

✅ 推荐实现步骤

1. 移除 CSS 中冗余的 overflow: hidden
   删除媒体查询中 nav ul 的 overflow: hidden（它对阻止页面滚动无效，且可能干扰子元素焦点）：

   /* ❌ 删除这一行 */
   nav ul {
     /* ...其他样式 */
     overflow: hidden; /* ← 删除此项 */
   }

2. 添加 JavaScript 动态控制 body 滚动
   在 HTML 文件底部（或 DOM 加载完成后）插入以下脚本：

   <script>
     const menuToggle = document.getElementById('click');
     const body = document.body;
   
     const toggleBodyScroll = () => {
       body.style.overflow = menuToggle.checked ? 'hidden' : '';
       // 补充：重置滚动位置以避免 Safari 回弹偏移（可选）
       if (menuToggle.checked) {
         body.style.position = 'fixed';
         body.style.top = `-${window.scrollY}px`;
       } else {
         body.style.position = '';
         body.style.top = '';
         window.scrollTo(0, parseInt(body.style.top || '0') * -1);
       }
     };
   
     menuToggle.addEventListener('change', toggleBodyScroll);
   </script>

   ? 增强说明：基础版 body.style.overflow = 'hidden' 已解决绝大多数场景；但 Safari 等浏览器在 overflow: hidden 下仍可能保留滚动惯性或导致页面“上跳”。上述增强逻辑通过 position: fixed 锁定 body 并记录/恢复 scrollY，彻底消除回弹，推荐生产环境使用。

3. 确保无障碍与体验细节

   • ✅ 菜单打开时，建议为 添加临时 class（如 menu-open），便于配合 CSS 进行过渡动画或遮罩层样式；
   • ✅ 使用 tabindex="-1" 或 aria-hidden="true" 控制菜单关闭时焦点管理；
   • ⚠️ 避免在 overflow: hidden 期间触发 window.resize 事件监听，防止重复计算。

? 总结

该方案不依赖第三方库，兼容所有现代浏览器，且与现有 CSS 媒体查询无缝集成。核心在于：滚动控制权必须交由 JavaScript 动态决策，而非静态 CSS 规则。只要确保 #click 复选框状态变更时同步更新 body 的 overflow 和 position 样式，即可实现丝滑、稳定、无障碍的菜单交互体验。