Page Not Scrolling All The Way After Navigating To Third Page

[joshuaedo]

Hello,

I have a similar issue as #184.

I am currently building with Vite + React and would love to be able to integrate lenis-smoothscroll into it but I noticed a bug that affects scrolling all the way down on desktop.

When a user scrolls from top to bottom on any two pages, the footer is cut in half on the third page. The order of navigation is irrelevent as the result is always the same.

main.css

... html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; }

LenisScroller.jsx

import Lenis from "@studio-freight/lenis";
import { useEffect } from "react";

export default function LenisScroller(props) {
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    });

    lenis.on("scroll", (e) => {
      console.log(e);
    });

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);

  return <>{props.children}</>;
}

App.jsx

...
 import LenisScroller from "./components/smooth-scroll/LenisScroller.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 />
          </>
        ) : (
          <>
               <LenisScroller> 
                <Header />
                <Navbar />
                <MobileNavbar />
                <Cursor />
               <Routes>
                 <Route path={"/"} element={<Home />} />
                 <Route path={"/about"} element={<About />} />
                 <Route path={"/projects"} element={<Projects />} />
                 <Route path={"/projects/:slug"} element={<Slug />} />
                 <Route path="*" element={<NotFound />} />
               </Routes>
               <Footer />
              </ScrollToTop>
              </LenisScroller> 
            </HeaderProvider>
          </>
        )}
      </div>
    </BrowserRouter>
  );
}

[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