使用Position: absolute导致移动端页面缩放异常问题求助

问题描述 #

响应式导航栏在大屏设备运行正常，但移动端布局下，设置right: -200px;将导航移出屏幕时，整个网站出现缩放异常；移除该属性可解决问题，但需要保留导航移出屏幕的效果。疑问：该缩放行为是否为Next.js特有？

问题分析 #

这个问题不是Next.js特有的，属于浏览器默认布局行为：当绝对定位元素的位置超出视口范围时，浏览器会将该元素的占位范围纳入页面整体宽度计算，导致页面出现横向滚动或缩放，以容纳视口外的元素。

解决方案 #

推荐以下几种方法替代right: -200px;，既实现导航移出屏幕的效果，又避免页面缩放：

方法1：使用transform: translateX(100%)（推荐） #

transform不会触发浏览器布局重排，且不会让浏览器将元素偏移范围计入页面宽度，是最流畅的实现方式：

@media (max-width: 822px) {
  .nav-links-main ul li {
    text-align: center;
    display: block;
  }

  .nav-links-main {
    position: absolute;
    background: #f44336;
    min-height: 100vh;
    width: 200px;
    top: 0;
    text-align: left;
    z-index: 1;
    /* 替换right: -200px */
    transform: translateX(100%);
    /* 可选：添加过渡动画，提升交互体验 */
    transition: transform 0.3s ease-in-out;
  }

  /* 配合openMenu逻辑，打开菜单时的样式 */
  .nav-links-main.open {
    transform: translateX(0);
  }

  .bars {
    display: block;
  }
}

方法2：给父容器/body添加overflow-x: hidden #

通过隐藏横向溢出，强制浏览器不扩展视口宽度：

/* 在全局样式中添加 */
body {
  overflow-x: hidden;
  margin: 0; /* 避免默认margin导致的滚动 */
}

@media (max-width: 822px) {
  .nav-links-main {
    /* 保留原有的right: -200px */
    position: absolute;
    background: #f44336;
    min-height: 100vh;
    width: 200px;
    top: 0;
    text-align: left;
    z-index: 1;
    right: -200px;
  }
  /* 其他样式不变 */
}

注意：如果页面有其他需要横向滚动的内容，此方法可能会冲突。

方法3：使用position: fixed代替absolute #

固定定位的元素不会影响文档流宽度计算，配合right: -200px也能避免页面缩放：

@media (max-width: 822px) {
  .nav-links-main {
    position: fixed; /* 替换absolute为fixed */
    background: #f44336;
    min-height: 100vh;
    width: 200px;
    top: 0;
    text-align: left;
    z-index: 1;
    right: -200px;
  }
  /* 其他样式不变 */
}

补充说明 #

导航菜单切换逻辑（openMenu）只需给.nav-links-main添加对应类（如.open），配合上述样式修改即可实现菜单的显示/隐藏。

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