代码之家 › 专栏 › 技术社区 › Alan DEV

我无法在Nextjs网页应用程序上滚动

navigation scroll next.js typescript reactjs

Alan DEV · 技术社区 · 3 年前

我有以下问题,我有我的投资组合网页基于3个组件,英雄,关于和投资组合。布局是下一个:

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

我的页面.tsx是下一个:

  return (
   <main>
  <HeroSection />
   <AboutMe />
   <Portfolio />
   </main>
   
  )
}```

1 回复 | 直到 3 年前

mbaric 3 年前

首先你 RootLayout 似乎是错的。应该有 body 元素通过 children 。

请参阅 Nextjs documentation 有关布局的详细信息。

根布局 应该看起来像:

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

不确定内容的高度,但您可以尝试以下操作:

.content{
  height: 100vh;
  overflow: auto;
}

在 page.tsx 将内容包装到 div 要素

<div className="content">
  <HeroSection />
  <AboutMe />
  <Portfolio />
</div>

希望它能有所帮助!

推荐文章

Malte K · CSS前后括号内容不起作用

1 年前

Gaurav · 如何使用命名路由在Flutter中导航回特定屏幕?

2 年前

Yervand Mazlumyan · 在Flutter中弹出页面而不是导航

2 年前

à¸ à¸²à¸§à¸±à¸ à¸«à¸¡à¸µà¸à¸´à¹à¸¡ · 如何创建这样的环绕导航箭头的圆圈?

2 年前

Andrew Leto · 使文本根据其下方的颜色动态更改颜色

2 年前

Muddassar · mutableStateListOf在更改时未更新其值

2 年前

Basavaraja · Vite生产应用程序页面导航在html网站中失败

2 年前

Rajesh · MFMailComposeViewController条形按钮颜色问题

2 年前

mechanic · Go Router:如何在小部件内实现嵌套导航

2 年前

liesly · 带有下拉菜单链接的完整CSS导航不起作用?

2 年前