How to stop scroll on modal pop-up & keep smooth scroll active?

[kipedia]

👋
I have a modal pop-up that requires the background to stop scrolling entirely, I'm using the "data-lenis-stop" and "data-lenis-prevent" properties to make this work. However this also stops the smooth scrolling, which I want to keep on the modal.

Any help would be greatly appreciated, thanks!

[iamlinkus]

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()
}

[Durotan120]

oke

[kipedia]

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()
}

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.
This method works except for the fact that smooth scrolling seems to stop with the data-lenis-stop attribute, but I want smooth scrolling to remain active on scrolling of the modal. Any ideas?

[cini9]

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 ?

[kipedia]

Please let me know if you find an solution, still looking myself!

[cini9]

Nah I haven't found a solution for this yet. In the end I just accepted my fate that the scroll inside of the drawer is not smooth for the time being. But still on the lookout for workarounds or new versions that will allow nested smooth scrolling.

[clementroche]

Lenis already support nested scroll, you just need another ReactLenis instance on your drawer
<ReactLenis>scrolling content<ReactLenis> 🤷‍♂️

[cini9]

Unfortunately I couldn't get it to work. I will keep trying when I have a moment and @kipedia let me know if you find a way to get it to work too :)

[henrybabbage]

Unable to get this to work in a ChakraUI drawer currently, with a nested ReactLenis instanced inside the drawer.

[clementroche]

Check prevent option #347

[kipedia]

Thanks for your suggestion! If I understand you correctly you're referencing the data-lenis-prevent option?
I already have this option enabled, which allows the modal to be scrolled while the background remains in place. However, it doesn't "prevent" the slow-scroll functionality to be disabled, which is what I'm trying to solve.

[clementroche]

@kipedia please share a reproduction link

[hoangnhan2ka3]

Any other solutions? I got many dialogs, popups, alerts, etc. in my app, it seems not quite right if I need to use lenis.stop() in every modal like that, and also need to enable it again.

I'm using Radix as well as Shadcn, after dig into the code base of one, I see that radix uses react-remove-scroll plugin to stop page scrolling when a popup for example, is opened.

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?

[hoangnhan2ka3]

thank you so much for replying, I'll try it tomorrow.

[hoangnhan2ka3]

Hi @clementroche, I tried your advice about [data-scroll-locked] attribute, genius. But it just work on <Dialog /> but <ContextMenu />.

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 [data-scroll-locked] attribute is already appear at body tag.

Then try opening the <Dialog />, it works.

On the other hand. You can toggle lenis with the bottom-left button to see the normal and Lenis' behavior. When Lenis' options.smoothWheel={false} the context-menu works.

I also try hard adding the attribute data-scroll-locked="" on context-menu.tsx at ContextMenuPrimitive.Content but hopeless.

Can you tell me if this is Radix bug or Lenis bug?

[clementroche]

That's because pointer-events: none is applied to body so wheel events are not forwarded. One solution could be to listen attribute change on body using MutationOberserver then lenis.stop if data-scroll-locked is added.

[hoangnhan2ka3]

Thank you for detecting that the problem is from pointer-events: none. You're right, <Dialog /> has a <DialogOverlay /> that stays in front of the pointer-events: none of <body /> tag, the important here is <DialogOverlay /> has pointer-events: auto.

SO I've solved the problem by adding a ContextMenuOverlay (the concept is similar to <DialogOverlay />):

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 <ContextMenuPortal /> like this:

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

[Op-Pautu]

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.

const body = document.body;
  const footer = document.querySelector("footer");
  useEffect(() => {
    const scrollbarWidth =
      window.innerWidth - document.documentElement.clientWidth;

    if (isMenuOpen) {
      // Store current scroll position
      scrollPosition.current = window.scrollY;

      body.classList.add("overflow-hidden", "menu-open");
      body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);

      body.setAttribute("data-lenis-prevent", "true");

      if (footer) {
        footer.setAttribute("data-lenis-prevent", "true");
      }
    } else {
      body.classList.remove("overflow-hidden", "menu-open");
      body.removeAttribute("data-lenis-prevent");

      if (footer) {
        footer.removeAttribute("data-lenis-prevent");
      }

      window.scrollTo(0, scrollPosition.current);
    }

    return () => {
      body.classList.remove("overflow-hidden", "menu-open");
      body.removeAttribute("data-lenis-prevent");

      if (footer) {
        footer.removeAttribute("data-lenis-prevent");
      }
    };
  }, [isMenuOpen]);