NextJS中overflow设置与sticky导航栏冲突问题求助

一、页面右侧空白的原因 #

页面右侧空白本质是元素横向溢出视口导致的，结合你的代码，核心诱因有三个：

1. .menu 宽度计算逻辑错误：你给.menu设了width:100%同时加了padding:10px，但默认box-sizing:content-box规则下，元素总宽度是100% + 20px（左右padding），直接超出视口触发横向滚动，视觉上表现为右侧空白。
2. 图片未做尺寸限制：.grid-image img只设置了object-fit:cover，但未明确width:100%和height:100%，若图片原生尺寸大于容器，会横向溢出。
3. 浏览器默认样式干扰：body标签默认带有margin:8px，未重置的话会导致页面内容无法完全占满视口宽度。

二、overflow-x:hidden导致sticky失效的原理 #

CSS position:sticky 的核心逻辑是相对于最近的可滚动祖先容器固定定位。当你给html/body设置overflow-x:hidden时，整个视口的滚动上下文被改为body容器，此时.menu的sticky定位会绑定到body而非浏览器视口。页面滚动时body本身不会滚动（内容被限制），因此sticky的固定效果直接失效。

三、是否需要用JavaScript替代CSS实现固定？ #

完全不需要。CSS sticky 是浏览器原生实现，性能远高于JS监听滚动事件的方案，且维护成本更低。只要解决横向溢出的根源问题，就能保留sticky的正常功能。

四、具体修复方案 #

1. 修复横向溢出（消除右侧空白） #

修改以下CSS代码：

• 给.menu添加box-sizing:border-box，让width:100%包含padding：

.menu {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    width: 100%;
    box-sizing: border-box; /* 新增 */
  
    position: sticky;
    top: 0;
    z-index: 1;
    
    color: white;
    background-color: black;
  
    padding: 10px;
    font-size: 1.5rem;
}

• 限制图片尺寸，避免溢出：

.grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

• 重置body默认margin：

body {
    margin: 0;
    padding: 0;
}

2. 恢复sticky功能 #

移除html/body上的overflow-x:hidden设置——上面的修复已经从根源解决了横向溢出问题，无需再通过隐藏滚动条掩盖问题。

若页面仍有其他元素导致横向溢出，建议逐个排查（比如绝对定位元素超出视口、grid/flex子元素宽度设置不当等），针对性修复，而非直接给根元素加overflow-x:hidden。

内容的提问来源于stack exchange，提问作者Nícolas Arths