How to stop scroll on modal pop-up & keep smooth scroll active? #292
-
|
👋 Any help would be greatly appreciated, thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 11 comments 29 replies
-
|
You shouldn't use the data attributes for that purpose. There are two methods described here. openModal() {
// Your modal open code
lenis.stop()
}
closeModal() {
// Your modal close code
lenis.start()
} |
Beta Was this translation helpful? Give feedback.
-
|
oke |
Beta Was this translation helpful? Give feedback.
-
Thanks for the reply! Unfortunately the link is broken. I'm using the data-lenis-stop attribute on modal open, and data-lenis-start on modal close, however my modal itself has overflow behaviour, so I'm using data-lenis-prevent to keep scroll active on the modal itself. |
Beta Was this translation helpful? Give feedback.
-
|
I'm having a similar issue with a drawer. I have ReactLenis activated for the root scroll in my NextJS layout. When I open the drawer, I would like the smooth scroll on the root to stop and smooth scroll on the drawer to be active. As it stands, I am able to stop root scrolling via data-lenis-prevent, but the smooth scroll on the drawer does not work. Is this currently possible ? |
Beta Was this translation helpful? Give feedback.
-
|
import { ReactLenis, useLenis } from "lenis/react"; If I add in my globals.css: than smooth scrolling works, but it breaks my scroll triggers |
Beta Was this translation helpful? Give feedback.
-
|
So it's a issue with your ScrollTrigger implementation then, I guess you need to setup the ReactLenis element as scroller for Scrolltrigger |
Beta Was this translation helpful? Give feedback.
-
|
That solves all! So, I need to add the global class for lenis for to work without 'root' Thank you |
Beta Was this translation helpful? Give feedback.
-
|
Do you know how can I implement this to Framer Motion? |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Check Example using |
Beta Was this translation helpful? Give feedback.
-
|
@clementroche why did you mark it as a solution? We still don't know how to keep the smooth scrolling on a modal 🤦♂️ |
Beta Was this translation helpful? Give feedback.
-
|
Unless I misunderstood the original issue, the Check this codepen if you wanna stop body smooth scroll when modal is opened. Alternatively, if you need smooth scroll to be applied on the modal you could instantiate a As always, sharing a reproduction link is extremely helpful for maintainers. |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately the codepen is exactly my issue. I want the smoothscroll to continue on the modal, I'm curious why the prevent option isn't preventing it from being disabled. I'm not familiar with the wrapper and content options, I'll look into that. |
Beta Was this translation helpful? Give feedback.
-
|
@kipedia Here is a codepen using the |
Beta Was this translation helpful? Give feedback.
-
|
but it won't works if we need scroll enabled only inside the dialog box. if we use lenis?.stop() on dialog open and data-lenis-prevent for dialog box area then that dialog area can still be used to scroll entire page which we obviously don't want. |
Beta Was this translation helpful? Give feedback.
-
|
@kipedia please share a reproduction link |
Beta Was this translation helpful? Give feedback.
-
|
Any other solutions? I got many dialogs, popups, alerts, etc. in my app, it seems not quite right if I need to use I'm using Radix as well as Shadcn, after dig into the code base of one, I see that radix uses import { RemoveScroll } from "react-remove-scroll";
...
const ScrollLockWrapper = disableOutsideScroll ? RemoveScroll : React.Fragment;The problem that Lenis someway override this behavior. How to make Lenis respect that? |
Beta Was this translation helpful? Give feedback.
-
|
thank you so much for replying, I'll try it tomorrow. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @clementroche, I tried your advice about Please look at this reproduction. Try right clicking anywhere to open the context menu, then try scrolling in and out side of that context menu, it scroll as normal although the Then try opening the On the other hand. You can toggle lenis with the bottom-left button to see the normal and Lenis' behavior. When Lenis' I also try hard adding the attribute Can you tell me if this is Radix bug or Lenis bug? |
Beta Was this translation helpful? Give feedback.
-
|
That's because |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for detecting that the problem is from SO I've solved the problem by adding a const ContextMenuOverlay = ({
className
}: {
className?: React.HTMLAttributes<HTMLElement>["className"]
}) => (
<div className={cn(
"pointer-events-auto fixed inset-0 z-50", // bg-color is transparent
className
)} />
)
ContextMenuOverlay.displayName = "ContextMenuOverlay"AND put it inside of const ContextMenuContent = React.forwardRef<
React.ElementRef<typeof ContextMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
<ContextMenuPortal>
<>
<ContextMenuOverlay />
<ContextMenuPrimitive.Content
ref={ref}
className={cn(
"...",
className
)}
{...props}
/>
</>
</ContextMenuPortal>
))Finally we can solve it. thank you so much @clementroche |
Beta Was this translation helpful? Give feedback.
-
|
this is a very frustrating problem. spent all day debugging why my navbar dropdown is not disabling scroll (with mousewheel up/down), and it turned out lenis was the problem. the default behaviour should be in lenis, honestly. anyway the fix is simple. |
Beta Was this translation helpful? Give feedback.
-
|
I faced a similar issue with my mobile navigation. I needed to prevent the document from scrolling when it opened. Otherwise, some event listeners inside the nav wouldn't properly register (mostly click events). Anyway, here's a very basic JS snippet that you can tailor to your own needs: document.addEventListener('DOMContentLoaded', () => {
const pageWrapper = document.querySelector('html');
const hamburger = document.querySelector('#hamburger');
let navIsOpen = false;
hamburger.addEventListener('click', () => {
navIsOpen = !navIsOpen;
pageWrapper.style.height = navIsOpen ? '100svh' : '';
pageWrapper.style.overflow = navIsOpen ? 'hidden' : '';
if (navIsOpen){
lenis.stop();
pageWrapper.setAttribute("data-lenis-prevent", "true");
}else{
lenis.start();
pageWrapper.removeAttribute("data-lenis-prevent");
}
});
}); |
Beta Was this translation helpful? Give feedback.
-
|
One approach I found for my use case is to track the state of the data-scroll-locked property on the body element using a MutationObserver. "use client";
import { useEffect, useRef } from "react";
import { cancelFrame, frame, type frameData } from "framer-motion";
import { type LenisRef, ReactLenis } from "lenis/react";
type ReactLenisProviderProps = {
children: React.ReactNode;
};
const ReactLenisProvider = ({ children }: ReactLenisProviderProps) => {
const lenisRef = useRef<LenisRef | null>(null);
useEffect(() => {
function update(time: typeof frameData) {
lenisRef.current?.lenis?.raf(time.timestamp);
}
frame.update(update, true);
const observer = new MutationObserver(() => {
const isScrollLocked = document.body.dataset.scrollLocked === "1";
const bodyStyle = document.body.style;
if (lenisRef.current?.lenis) {
if (isScrollLocked) {
lenisRef.current.lenis.stop();
bodyStyle.overflow = "hidden";
} else {
lenisRef.current.lenis.start();
bodyStyle.overflow = "";
}
}
});
observer.observe(document.body, {
attributes: true,
attributeFilter: ["data-scroll-locked"],
});
return () => {
cancelFrame(update);
observer.disconnect();
};
}, []);
return (
<ReactLenis
root
options={{
autoRaf: false,
duration: 1.5,
lerp: 0.1,
orientation: "vertical",
gestureOrientation: "vertical",
}}
ref={lenisRef}
>
{children}
</ReactLenis>
);
};
export { ReactLenisProvider };And also add the data-lenis-prevent attribute to the element. For me, it was the ShadCN components (Dialog, Sheet, and DropdownMenu) content. I added the attribute globally within the respective component itself. |
Beta Was this translation helpful? Give feedback.
-
|
Simplest solution is to create a wrapper around the base modal component you are using and listening to an event handler. export function ModalRoot({
children,
onOpenChange,
...props
}: DialogRootProps) {
const lenis = useLenis();
return (
<DialogRoot
lazyMount
unmountOnExit
preventScroll={false}
onOpenChange={({ open }) => {
if (open) {
lenis?.stop();
} else {
lenis?.start();
}
onOpenChange?.({ open });
}}
{...props}
>
{children}
</DialogRoot>
);
}Then inside the ModalContent initialise another instance of lenis (non root) to have smooth scroll for the content inside. function ModalContent({
children,
positionerClassName,
contentClassName,
}: ContentProps) {
return (
<Dialog.Content>
<Lenis root={false}>
{children}
</Lenis>
</Dialog.Content>
);
}This approach assumes you are using a modular component library(you definetly should) which grants you access to the single building blocks of a modal/dialog. |
Beta Was this translation helpful? Give feedback.
-
|
"use client"; import React from "react"; type Props = { const TermsConditions = ({ onClose }: Props) => { <div onClick={(e) => e.stopPropagation()} data-lenis-prevent className="bg-white overflow-y-auto max-h-[90vh] shadow-lg rounded-2xl w-full max-w-4xl " > {/* Header */} Terms And ConditionsYour Agreement ); export default TermsConditions; |
Beta Was this translation helpful? Give feedback.
Check
preventoption #347Example using
preventoptionExample using
wrapperandcontentoptions