React网站导航栏滚动时右侧出现空白问题求助

问题说明 #

React项目中，页面向右滚动时，导航栏右侧会出现一块随内容长度延伸的空白。已设置nav元素width: 100%，排查过padding、样式覆盖，甚至使用!important，问题仍未解决。

相关代码 #

CSS 代码

nav {
    width: 100%;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0288D1 ;
    color: white;
    padding:0rem 4rem;
    position: sticky;
    top: 0;
}

JSX 代码

<nav>
    <div className="logo">
        <img src={TMElogo} alt=""/>
    </div>
    <h4>TME</h4>
    <div className='menu' onClick={() => {
        setMenuOpen(!menuOpen)
    }}>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <ul className={menuOpen ? "open" : ""}>
        <li>
            <NavLink to="/">HOME</NavLink>
        </li>
        <li>
            <NavLink to="/hummingbird">HUMMINGBIRD</NavLink>
        </li>
        <li>
            <NavLink to="/about">ABOUT</NavLink>
        </li>
    </ul>
</nav>

可能的原因及解决办法 #

• 页面存在横向溢出元素：页面出现横向滚动，通常是某个子元素宽度超出视口导致。nav的width:100%是相对于父元素初始宽度，滚动后父元素实际宽度因溢出变大，nav不会自动适配，从而露出空白。
  解决：排查页面内是否有固定宽度（如width: 1200px）或min-width过大的元素，将其改为max-width: 100%；或者临时给body添加overflow-x: hidden抑制横向滚动，再逐步定位溢出元素。

• 未设置box-sizing: border-box：默认box-sizing为content-box，此时width:100%仅计算内容宽度，加上padding: 0 4rem后，nav实际宽度会超出父元素，引发页面横向滚动，滚动后nav右侧出现空白。
  解决：给nav添加box-sizing: border-box，让内边距包含在width:100%范围内。

• sticky定位的适配问题：position: sticky的宽度基于其包含块，若包含块不是视口，横向滚动时nav不会跟随扩展宽度。
  解决：改用position: fixed; left: 0; right: 0;替代sticky，让导航栏固定在视口顶部，自动填满横向空间。

• 菜单展开时的溢出：移动端菜单展开后，ul元素宽度可能超出nav，导致页面横向滚动，进而出现导航栏空白。
  解决：检查.open类的样式，给ul添加max-width: 100%或overflow: hidden，限制其宽度不超出nav。

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