How to use Lenis with a custom scrolling container

[shessafridi]

Hi, I am trying to use Lenis with a custom scrolling container but I am unable to get it to work, I have tried regular Lenis as well as ReactLenis.

I am creating a new Lenis instance on my custom scroll container, but I am not getting any smooth scroll and the scroll wheel also stops working.

const DashboardPage = forwardRef<HTMLDivElement, Props>(
  ({ children, className = 'p-5', scrollId, ...props }, ref) => {
    const scrollRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
      const instance = new Lenis({
        wrapper: scrollRef.current || undefined,
      });

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

    return (
      <div
        ref={mergeRefs(ref, scrollRef)}
        id={scrollId || undefined}
        className='overflow-y-auto h-svh max-h-svh'
      >
        <ScreenHeader {...props} />
        <div className={className}>
          {children}
        <div>
      </div>
    );
  }
);

export default DashboardPage;

[shessafridi]

If I remove the custom scroll container, add ReactLenis and move the classes to the ReactLenis component then everything works as expected but then I can't attach id or HTMLDivElement ref

[FatNerdPeng]

Hello, have you found a solution to this problem? I encountered the same problem, my project used NextJS and GSAP, and I hoped that some of my elements could be controlled for some behavior using Lenis' smooth scrolling and GSAP's scrollTrigger, but I failed.