移动端导航菜单关闭时异常偏移问题求助

问题描述 #

制作移动端导航菜单，预期关闭时向右移出屏幕，点击按钮时回到屏幕内。但开启状态菜单位置正常，关闭时未正常右移消失，反而导致屏幕整体缩放、底部出现空白区域；改为左移菜单则功能正常。

页面状态说明 #

• 初始加载状态：初始加载状态
• 菜单开启状态：菜单开启状态
• 菜单关闭异常状态：菜单关闭异常状态

相关代码 #

HTML代码 #

<nav>
      <a href="index.html"><img src="images/logo.png" alt="logo"></a>
      <div class="nav-links" id="navLinks">
        <i class="fa fa-times" onclick="hideMenu()"></i>
        <ul>
          <li><a href="">HOME</a></li>
          <li><a href="">ABOUT</a></li>
          <li><a href="">PROPERTY</a></li>
          <li><a href="">CONTACT</a></li>
        </ul>
      </div>
      <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>

JavaScript代码 #

var navLinks = document.getElementById("navLinks");

function showMenu(){
  navLinks.style.right = "0";
}

function hideMenu(){
  navLinks.style.right = "-200px";
}

CSS移动端媒体查询代码 #

@media(max-width: 700px){
  .text-box h1{
    font-size: 20px;
  }
  .nav-links ul li{
    display: block;
  }
  .nav-links{
    position: absolute;
    background: #ec1212ca;
    height: 100vh;
    width: 200px;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
    transition: 1s;
  }

  nav .fa{
    display: block;
    color: #fff;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }

  .nav-links ul{
    padding: 30px;
  }
}

问题原因及解决方法 #

核心原因 #

当菜单设置right: -200px向右移出屏幕时，浏览器会判定页面存在横向可滚动内容，自动调整视口并显示横向滚动条，进而导致页面缩放、底部出现空白。而左移菜单（left: -200px）不会触发该问题，因为浏览器默认允许元素超出左侧视口，不会调整视口宽度。

解决步骤 #

1. 全局禁用横向溢出
   在全局CSS中添加以下代码，阻止页面出现横向滚动，从根源避免视口调整：

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

2. 优化菜单定位逻辑（可选）
   改用transform: translateX()实现位移，这种方式不会改变元素占位，更难触发视口问题，动画也更流畅：

• 修改CSS：

.nav-links{
  position: absolute;
  background: #ec1212ca;
  height: 100vh;
  width: 200px;
  top: 0;
  right: 0;
  text-align: left;
  z-index: 2;
  transition: transform 1s ease;
  transform: translateX(100%); /* 默认右移自身宽度 */
}

• 修改JavaScript：

function showMenu(){
  navLinks.style.transform = "translateX(0)";
}

function hideMenu(){
  navLinks.style.transform = "translateX(100%)";
}

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