Page Not Scrolling All The Way After Navigating To Third Page

[joshuaedo]

Page Not Scrolling All The Way After Navigating To Third Page

[arzafran]

Hello @joshuaedo thanks for the detailed explanation.
first, what is the version of Lenis you're using?
also, have you checked react-lenis?
one more thing, can you share the component?
last, as i was reviewing the structure, i see you are closing a context provider </HeaderProvider> but i don't see where that is opened, same for the component.

[joshuaedo]

Lenis Version

"@studio-freight/lenis": "^1.0.16",

HeaderContext.jsx

import { createContext, useState } from "react";

export const HeaderContext = createContext();

export function HeaderProvider({ children }) {
  const [isActive, setIsActive] = useState(false);
  const [show, handleShow] = useState(false);

  return (
    <HeaderContext.Provider value={{ isActive, setIsActive, show, handleShow }}>
      {children}
    </HeaderContext.Provider>
  );
}

Notes

1. Yes, I have tried react-lenis and locomotive-scroll@beta and I had the same issue; since they're both built on Lenis, I figured the bug was probably from my code.
2. I'm not sure which component you're referring to unless you mean </HeaderProvider>.
3. I had this issue before I integrated </HeaderProvider>.
4. The repo is public (incase you have the time to go through it).

[joshuaedo]

last, as i was reviewing the structure, i see you are closing a context provider but i don't see where that is opened, same for the component.

I made mistake while copy-pasting in the original comment.

Here's the full file

import { useState } from "react";
import Header from "./components/header";
import { BrowserRouter } from "react-router-dom";
import Cursor from "./components/cursor/Cursor.jsx";
import Footer from "./components/footer/Footer.jsx";
import Navbar from "./components/navbar/Navbar.jsx";
import { Router } from "./components/router/Router.jsx";
import { HomeLoader } from "./components/loader/Loading.jsx";
import { HeaderProvider } from "./contexts/HeaderContext.jsx";
import MobileNavbar from "./components/mobile-navbar/MobileNavbar.jsx";
import { ScrollToTop } from "./components/smooth-scroll/ScrollToTop.jsx";
// import LenisScroller from "./components/smooth-scroll/LenisScroller.jsx";
// import LocomotiveScroller from "./components/smooth-scroll/LocomotiveScroller.jsx";

export function App() {
  const [loading, setLoading] = useState(true);

  {
    setTimeout(() => {
      setLoading(false);
    }, 4900);
  }

  return (
    <BrowserRouter>
      <div className="bg-black tracking-wider text-white">
        {loading ? (
          <>
            <HomeLoader />
          </>
        ) : (
          <>
            <HeaderProvider>
              {/* <LenisScroller> */}
              {/* <LocomotiveScroller> */}
              <ScrollToTop>
                <Header />
                <Navbar />
                <MobileNavbar />
                <Cursor />
                <Router />
                <Footer />
              </ScrollToTop>
              {/* </LocomotiveScroller> */}
              {/* </LenisScroller> */}
            </HeaderProvider>
          </>
        )}
      </div>
    </BrowserRouter>
  );
}

[arzafran]

I've cloned your repo locally and tested using react-lenis and it's working fine, can you please provide more information like the browser you're using and screen resolution?

steps i did to test:
npm i @studio-freight/react-lenis

then in App.jsx i added:

import { ReactLenis } from "@studio-freight/react-lenis"

  return (
    <BrowserRouter>
      <div className="bg-black tracking-wider text-white">
        {loading ? (
          <>
            <HomeLoader />
          </>
        ) : (
          <>
            [...]
             <ReactLenis root>
               <HeaderProvider>
                  [...]
                </HeaderProvider>
              </ReactLenis>
            [...]
          </>
        )}
      </div>
    </BrowserRouter>
  );
}

[joshuaedo]

1. I just tried this again, same result.
2. Google Chrome and 1366 x 768.
3. Did you scroll all the way down on the first two pages you navigated to?

[joshuaedo]

@arzafran any luck?

[clementroche]

@joshuaedo provide a codesandbox

[clementroche]

i'm closing this issue because lack of activity