react spring parallax with navbar on top is creating 2 scrollbars

[Mootbing]

<Router>
      <nav />

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>

this is my code ^ but the parallax component is within , should I move it to wrap Router?

[kindoflew]

I don't think it has to do with the Router necessarily. Parallax will take up the full height/width of the screen by default, so the typical use is to treat the component as if it was the actual page being scrolled. Since the nav is outside of it, that creates scrollable space in the top-level element, so you'd see the window scrollbar and the Parallax scrollbar.

The solution is probably something that would involve positioning the nav so it isn't in the normal document flow (with something like position: absolute). This way, Parallax could still take up the entire viewport without causing another scrollbar to appear.