Next.js Discord

Discord Forum

How to disable scroll when menu open

Answered
Giant Chinchilla posted this in #help-forum
Open in Discord
Giant ChinchillaOP
Like im having an issue where i can still scroll the page when i have menu open and i tried so much but i cannot find out why and how i can fix it. I have a custom cursor and i have an indicator that shows scroll progress and you can see i can still scroll
Answered by Double-striped Thick-knee
@Giant Chinchilla it works,

import { ReactLenis, useLenis } from "@studio-freight/react-lenis";
import { useEffect, useState } from "react";

export default function App() {
    const lenis = useLenis();
    const [isActive, setIsActive] = useState(true);

    useEffect(() => {
        if (isActive) {
            lenis?.start();
        } else {
            lenis?.stop();
        }
    }, [isActive, lenis]);

    return (
        <ReactLenis root>
            <div className="h-[400vh]">
                <button className="fixed top-2 left-2" onClick={() => setIsActive(!isActive)}>
                    {isActive ? "Scrolling is on" : "Scrolling is off"}
                </button>
            </div>
        </ReactLenis>
    );
}
View full answer

38 Replies

Giant ChinchillaOP
am using lenis if thats helpful
Arinji
Oki so try this out
You disable the body overflow
You will see the scrollbar go inside and outside tho, like set and unset so you can also add some padding to the body to fix it
Giant ChinchillaOP
ait ty ill try later
Giant ChinchillaOP
yeah idk bro doesnt seem to work
like idk where to even add it in menu or the navbar
Giant ChinchillaOP
  const [isActive, setIsActive] = useState<boolean>(false);

  useEffect(() => {
    if (isActive) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "auto";
    }
  }, [isActive]);
like idk what else to try
Double-striped Thick-knee
@Giant Chinchilla have you checked this functions
lenis.stop()
lenis.start()
when your menu opens, call lenis.stop(), when it closes, call lenis.start()
Giant ChinchillaOP
ait lemme try
Double-striped Thick-knee
lemme create a small demo for you,
Giant ChinchillaOP
do it on this 🙂
Double-striped Thick-knee
where is your lenis instance
Giant ChinchillaOP
ion use lenis on this code itself but the whole project
like i use this in layout.tsx
@Giant Chinchilla ion use lenis on this code itself but the whole project
Double-striped Thick-knee
where did you call lenis.stop()
Giant ChinchillaOP
in navbar but deleted since it didnt work
useEffect(() => {

if (isActive) {
lenis.stop(); // Stop scrolling when menu is active
} else {
lenis.start(); // Allow scrolling when menu is inactive
}
}, [isActive]);

smth like this
Double-striped Thick-knee
are you sure that if blocks are getting called
Giant ChinchillaOP
it should yeah
even tho i deleted whole lenis and everything and still didnt work like i dnt think its lenis related
Giant ChinchillaOP
from preloader component i use
js modified a bit
Double-striped Thick-knee
@Giant Chinchilla it works,

import { ReactLenis, useLenis } from "@studio-freight/react-lenis";
import { useEffect, useState } from "react";

export default function App() {
    const lenis = useLenis();
    const [isActive, setIsActive] = useState(true);

    useEffect(() => {
        if (isActive) {
            lenis?.start();
        } else {
            lenis?.stop();
        }
    }, [isActive, lenis]);

    return (
        <ReactLenis root>
            <div className="h-[400vh]">
                <button className="fixed top-2 left-2" onClick={() => setIsActive(!isActive)}>
                    {isActive ? "Scrolling is on" : "Scrolling is off"}
                </button>
            </div>
        </ReactLenis>
    );
}
Answer
big kisses on forehead for u
Double-striped Thick-knee
lol, what did you do before
Giant ChinchillaOP
BROOOO
i didnt have lenis there i only had is active
literally mine
Double-striped Thick-knee
is it working now?
Giant ChinchillaOP
yes ty