汉堡菜单侧边滚动溢出问题求助

问题分析 #

你遇到的两个核心问题：

1. 横向滚动条：因为移动端.nav用left:100%+right:-100%的定位方式，导致元素宽度超出视口，触发横向滚动
2. 菜单高度受限：给header加position: relative和overflow: hidden后，绝对定位的.nav会被header的边界限制，无法占满屏幕高度

解决方案 #

1. 修复横向滚动条（替换定位逻辑）

修改移动端下.nav的CSS，用transform替代left/right定位，同时改用fixed确保菜单占满视口：

@media (max-width: 988.98px) {
  /* 移除.header__nav的背景色，移到.nav里 */
  .header__nav {
    z-index: 9999;
  }
  .nav {
    position: fixed; /* 改为相对于视口定位 */
    top: 0;
    right: 0;
    transform: translateX(100%); /* 初始状态完全移出视口右侧 */
    z-index: 999;
    min-width: 375px;
    height: 100vh;
    padding-top: 30px;
    color: #ff7143;
    background-color: #5454d4;
    transition: transform 0.3s ease; /* 过渡效果改为transform，更流畅 */
  }
}

2. 调整JS逻辑匹配新定位

修改菜单切换代码，操作transform而非right属性，同时添加页面滚动锁定：

const mobileNav = document.querySelector(".nav");

document.querySelector(".burger-menu").addEventListener("click", () => {
  mobileNav.style.transform = "translateX(0)";
  document.body.style.overflow = "hidden"; // 打开菜单时禁止页面滚动
});

document.querySelector(".burger-menu__exit").addEventListener("click", () => {
  mobileNav.style.transform = "translateX(100%)";
  document.body.style.overflow = ""; // 关闭时恢复滚动
});

3. 移除不必要的父级限制

不需要给header添加position: relative和overflow: hidden，因为fixed定位的.nav完全脱离文档流，不受父级元素边界限制，自然能保持100vh的高度。

为什么这样改？ #

• fixed定位让菜单直接相对于视口布局，彻底摆脱父级header的高度限制
• transform: translateX(100%)是视觉位移，不会改变元素的布局空间，因此不会触发横向滚动条
• 菜单打开时锁定body滚动，避免用户误操作滚动页面，提升移动端体验

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