Scroll broken on v5 <> Mobile Devices

[pankajyadav05]

Hello 👋

In version v5.0.0-beta.8 scroll is not working on mobile devices (it works If I connect a mouse to a mobile and use that to scroll). The same code is working perfectly on v4.

One thing to note is I have set overflow is set to hidden in CSS. If I remove the scroll works as expected but it's not smooth.

This is my context file

import React, { createContext, useEffect, useState } from "react";

export const SmoothScrollContext = createContext({
  scroll: null,
});

export const SmoothScrollProvider = ({ children, options }) => {
  const [scroll, setScroll] = useState(null);

  useEffect(() => {
    if (!scroll) {
      (async () => {
        try {
          const LocomotiveScroll = (await import("locomotive-scroll")).default;

          setScroll(
            new LocomotiveScroll({
              el:
                document.querySelector("[data-scroll-container]") ?? undefined,
              ...options,
            })
          );
        } catch (error) {

        }
      })();
    }

    return () => {
      scroll && scroll.destroy();
    };
  }, [scroll]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <SmoothScrollContext.Provider value={{ scroll }}>
      {children}
    </SmoothScrollContext.Provider>
  );
};

SmoothScrollContext.displayName = "SmoothScrollContext";
SmoothScrollProvider.displayName = "SmoothScrollProvider";

I am using Next.js 13.4.10 and React 18.2.0

Note: I know what overflow: hidden does. and I have tested everything thoroughly on v4. Scroll is working perfectly on mobile devices.

Thank you 👊

[pankajyadav05]

found the solution,

You need to pass lenisOptions : {smothTouch: true }

Code snippet from my use case scinario

`<SmoothScrollProvider options={{ smooth: true, lenisOptions: { smoothTouch: true, } }}

//other code `