Next.js作品集网页无法滚动问题技术求助

核心问题分析与修复步骤 #

1. 修复HTML结构缺失问题 #

你的RootLayout缺少了<body>标签，违反HTML规范会导致浏览器渲染异常，进而影响滚动行为。

修改RootLayout代码，添加<body>标签包裹内容：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <Navbar />
        <main>{children}</main>
      </body>
    </html>
  )
}

2. 移除重复的<main>标签 #

page.tsx中嵌套了额外的<main>标签，可能引发样式冲突，建议替换为React片段：

return (
  <>
    <HeroSection />
    <AboutMe />
    <Portfolio />
  </>
)

3. 排查CSS样式限制 #

如果上述修改后仍无法滚动，检查以下样式问题：

• 全局样式（如globals.css）中是否存在html, body { overflow: hidden; }或height: 100%;，移除overflow: hidden，或把height改为min-height: 100vh;
• 检查HeroSection、AboutMe、Portfolio组件的样式，是否设置了height: 100vh且overflow: hidden，这类设置会截断超出视口的内容，需改为min-height: 100vh或移除overflow: hidden
• 确认<main>元素是否被设置了overflow: hidden，如有则改为overflow: auto或删除该属性

完成修改后重启开发服务器，测试页面滚动功能是否恢复正常。

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