从ReactJS切换到NextJS后页面出现两个垂直滚动条该如何解决？

云上老周

2026-10-5

双滚动条问题原因

NextJS 框架内置了根节点默认样式：Pages Router 下的 #__next 容器、App Router 下根 layout 自带的顶层布局容器，默认都会设置 min-height: 100vh 等高相关属性
你将 overflow-y: scroll 配置全局挂载到 html 或 body 节点后，上述 Next 内置容器如果也继承或者被匹配到溢出滚动规则，两个层级的节点同时触发垂直滚动条，就会出现双滚动条的表现

修复方案

调整全局CSS的配置范围，仅给html节点加你需要的滚动条规则，同时重置相关节点的溢出属性：

/* 仅给html根节点加滚动配置，实现你要的无布局偏移效果 */
html {
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  /* 清除body的滚动触发能力 */
  overflow-y: auto;
}

/* Pages Router 项目新增这条规则 */
#__next {
  min-height: 100vh;
  overflow: visible;
}

/* App Router 项目如果有自定义顶层包裹容器，给对应容器加即可 */
.your-root-wrapper {
  min-height: 100vh;
  overflow: visible;
}