移动端滑动时隐藏Navbar菜单意外显示的问题求助

问题根源 #

当前导航菜单用right: -100%隐藏时，虽然视觉上不在视口内，但元素本身的100%宽度仍会撑大页面的横向滚动区域，滑动屏幕就会看到菜单露出。之前用overflow-x: hidden没生效，是因为绝对定位元素脱离了文档流，必须给**顶级容器（html/body）**设置这个属性才能截断溢出内容。

解决方案 #

1. 给html和body添加overflow-x: hidden，彻底禁止页面横向滚动
2. 用transform: translateX(100%)替代right: -100%隐藏菜单——这种方式只是视觉偏移，不会占据额外布局空间
3. 调整激活状态样式，用transform: translateX(0)实现菜单滑入效果

修改后的完整代码 #

CSS 代码 #

/* 全局禁止横向滚动，截断溢出内容 */
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.navbar {
    width: 100%;
    height: 90px;
    top: 0;
    left: 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    /* 让navbar成为绝对定位菜单的包含块 */
    position: relative;
}

.navbar .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:1rem;
}

.navbar span {
    color: #5651e5;
}

.navbar .nav-menu {
    display: flex;
}

.navbar li {
    padding: 1rem;
}

.hamburger {
    display: none;
}

.navbar .icon {
    font-size: 1.5rem;
}

@media screen and (max-width:940px) {
    .hamburger {
        display: block;
    }

    .navbar .nav-menu {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: 90px;
        /* 用transform替代right实现隐藏 */
        transform: translateX(100%);
        /* 高度适配导航栏下方的视口 */
        height: calc(100vh - 90px);
        width: 100%;
        background: rgba(255,255,255, .98);
        /* 过渡属性改为transform，动画更流畅 */
        transition: transform 0.4s ease-in-out;
        z-index: 10;
        margin: 0;
        padding-top: 2rem;
    }

    .navbar .active {
        /* 激活时重置transform，让菜单滑入 */
        transform: translateX(0);
    }

    .navbar .nav-menu li a {
        font-size: 2rem;
    }
}

JSX 代码 #

const { useState } = React;

function Navbar() {
  const [click, setClick] = useState(false);
  const handleClick = () => setClick(prev => !prev);

  return (
    <div className="navbar">
      <div className="container">
        <ul className={`nav-menu ${click ? 'active' : ''}`}>
          <li><a href="#home">Home</a></li>
          <li><a href="#search">Search</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <div className="hamburger" onClick={handleClick}>
          <i className="icon">{click ? 'Click here' : 'Swipe right =====>'}</i>
        </div>
      </div>
    </div>
  );
}

关键修改说明 #

• 全局overflow-x: hidden：从根源上阻止页面因溢出元素产生横向滚动，同时截断视口外的内容
• transform替代right：CSS变换仅改变视觉位置，不影响页面布局计算，彻底解决菜单撑大页面的问题
• 适配菜单高度：用calc(100vh - 90px)让菜单刚好填满导航栏下方的视口，避免多余纵向滚动
• 优化过渡动画：将过渡目标改为transform，动画性能更优、效果更流畅

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