Search code examples
reactjstypescriptnext.jsscrollnavigation

I cant scroll on my Nextjs webpage application

I have the following issue, i have my portfolio webpage based on 3 components, Hero, About and Portfolio. The layout is the next one:

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

and my page.tsx is the next one:

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

  • First of all your RootLayout seems to be wrong. There should be body element passing the children.

    Please refer to the Nextjs documentation for more information on layouts.

    RootLayout should look something like:

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

    Not sure what's the height of the content, but you can try following:

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

    In the page.tsx wrap your content into div element

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

    Hope it helps!