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