汉堡菜单（Hamburger menu）打开时锁定页面滚动的解决方案咨询

你的菜单通过<input type="checkbox">控制显示状态，这里提供两种实用方案：

方案一：纯CSS实现（无需JS） #

利用复选框的:checked伪类，直接给body设置样式锁定滚动，简单高效。

实现代码： #

/* 默认允许页面滚动 */
body {
  overflow: auto;
  /* 可选：添加过渡动画，避免页面滚动条消失时的跳动 */
  padding-right: 0;
  transition: padding-right 0.3s ease;
}

/* 复选框被选中（菜单打开）时，锁定body滚动 */
#side-menu:checked ~ body {
  overflow: hidden;
  /* 可选：自动匹配滚动条宽度，防止页面偏移 */
  padding-right: calc(100vw - 100%);
}

注：calc(100vw - 100%)能自动获取当前浏览器的滚动条宽度，完美解决滚动条消失导致的页面跳动问题。

方案二：JavaScript实现（更灵活） #

如果需要保留页面滚动位置、或者配合菜单动画使用，用JS监听复选框状态变化更合适：

实现代码： #

const menuToggle = document.getElementById('side-menu');
const body = document.body;

menuToggle.addEventListener('change', () => {
  if (menuToggle.checked) {
    // 菜单打开：锁定滚动，记录当前位置
    const scrollTop = window.scrollY;
    body.style.overflow = 'hidden';
    body.style.position = 'fixed';
    body.style.top = `-${scrollTop}px`;
    body.style.width = '100%';
  } else {
    // 菜单关闭：恢复滚动，回到之前的位置
    const scrollTop = parseInt(body.style.top || 0);
    body.style.overflow = '';
    body.style.position = '';
    body.style.top = '';
    window.scrollTo(0, -scrollTop);
  }
});

这个方案能避免菜单关闭后页面跳回顶部的问题，体验更流畅。

额外提示 #

• 如果你的头部是固定定位（.header），要确保它的position: fixed属性不会被滚动锁定逻辑影响。
• 移动端测试时注意：部分浏览器的触摸滚动需要额外处理，上述两种方案基本能覆盖主流场景。

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