通过为 <body> 添加 disabledScroll 类并配合 CSS 的 overflow: hidden，可实现在汉堡菜单开启时锁定页面滚动，关闭时恢复滚动，简洁高效且兼容性好。
通过为 `
` 添加 `disabledscroll` 类并配合 css 的 `overflow: hidden`，可实现在汉堡菜单开启时锁定页面滚动，关闭时恢复滚动，简洁高效且兼容性好。在响应式导航设计中，汉堡菜单（Hamburger Menu）展开时若不禁用背景页面滚动，会导致用户体验割裂——用户滑动屏幕时菜单未关闭，内容却意外滚动，尤其在移动端尤为明显。解决该问题的核心思路是：动态控制 <body> 元素的溢出行为。
实现原理
利用 CSS 的 overflow: hidden 阻止 <body> 的滚动，再结合 JavaScript 切换该样式状态。由于 <body> 是滚动容器（在多数浏览器中），对其设置 overflow: hidden 可立即冻结整个页面的垂直与水平滚动。
完整实现步骤
1. 修改 HTML，绑定点击事件
为汉堡标签 <label> 添加 onclick 事件（注意：原代码中 <label for="side-menu"> 已关联 checkbox，但需显式触发逻辑）：
<label class="hamb" for="side-menu" onclick="hambClicked()"> <span class="hamb-line"></span> </label>
✅ 提示：也可监听 #side-menu 的 change 事件，更语义化且避免重复触发；但 onclick 方案简单直接，适合快速集成。
2. 编写 JavaScript 控制逻辑
在 <script> 或外部 JS 文件中定义函数（推荐使用现代写法，避免全局变量）：
let isMenuOpen = false;
function hambClicked() {
const body = document.body;
if (isMenuOpen) {
body.classList.remove('disabledScroll');
} else {
body.classList.add('disabledScroll');
}
isMenuOpen = !isMenuOpen;
}⚠️ 注意：函数名需与 HTML 中 onclick="hambClicked()" 严格一致（原答案中误写为 hamClicked，已修正拼写）。
3. 添加 CSS 样式
在样式表中定义 .disabledScroll 类：
.disabledScroll {
overflow: hidden;
height: 100vh; /* 可选：防止因滚动条消失导致布局跳动 */
}? 进阶建议：若页面存在横向滚动或需保留右侧滚动条宽度，可进一步优化为：
.disabledScroll { overflow: hidden; position: fixed; width: 100%; top: 0; left: 0; }此写法能彻底隔离滚动上下文，避免 height: 100vh 在 Safari 中的兼容性问题。
补充说明
- 该方案不依赖第三方库，纯原生实现，轻量可靠；
- 若使用 checkbox 切换菜单（如本例），也可改用 change 事件监听，更符合表单语义：
document.getElementById('side-menu').addEventListener('change', function() { document.body.classList.toggle('disabledScroll', this.checked); }); - 测试时请在真实移动设备或 Chrome DevTools 的设备模拟器中验证，确保触摸滚动被正确拦截。
至此，汉堡菜单展开时页面将完全静止，收起后滚动立即恢复，兼顾功能性与用户体验。
