使用JavaScript切换CSS实现汉堡菜单打开时禁止背景页面滚动

你已经提前定义好了禁止滚动的.noscroll样式类，只需要通过JS监听汉堡菜单的开关状态，动态给页面主体切换该类即可实现需求。

步骤1：添加功能代码 #

把以下JS代码放在你现有搜索功能的<script>标签之后即可：

const menuToggle = document.getElementById('cp_toggle03');
// 监听汉堡菜单切换事件
menuToggle.addEventListener('change', function() {
  if (this.checked) {
    // 菜单打开时禁止背景滚动
    document.body.classList.add('noscroll');
  } else {
    // 菜单关闭时恢复背景滚动
    document.body.classList.remove('noscroll');
  }
});

步骤2：（可选优化）修复蒙层关闭功能 #

现有代码中点击黑色蒙层无法关闭菜单，是因为对应label的关联属性配置错误，修改如下即可：
找到标签：

<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>

将for属性值改为菜单开关的id：

<label id="h-menu_black" class="cp_toggle03" for="cp_toggle03"></label>

修改后点击黑色蒙层会自动关闭菜单，滚动状态也会同步恢复。

生效说明 #

你的.noscroll类已经写在移动端媒体查询规则内，所以上述逻辑只会在触发汉堡菜单的屏幕尺寸（480px-1050px）下生效，不会影响桌面端的正常滚动。

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