-
Notifications
You must be signed in to change notification settings - Fork 20
[bug] Duplicate Locomotive Scroll Instances #33
Comments
same with nextjs |
Yep, same problem here. Im working on nextjs app |
This probably is because you are developing with React Strict Mode. To identify any issues in your code, Strict Mode will render the components twice in development mode (not in production). This is useful to detect legacy API usage, unsafe lifecycles and more. You might have reactStrictMode turned on in your next.config.js. Because of the side effects with LS, you probably shouldn't use Strict Mode in your entire application. To solve your issue, you could use <React.StrictMode> on a page-by-page basis. Put it inside your LS provider to prevent the double render.
|
Thank you. It's work for me |
Still getting the same problem with Vite |
maybe try to add this line in the App component. |
Hey there,
I reached out to you on Twitter @toinelin, but an Issue definitely seems to be more fitting. I'm currently implementing the project in a Next.js website that uses server-side data to render conditional page sections.
For example, using WordPress with Advanced Custom Fields I map through the Flexible Content specified in my ACF data to render page sections as they are returned from gql.
I've done this with two projects, my personal site, and the one I'm currently working on.
My personal site is using the same structure, where
_app.tsx
utilizesLocomotiveScrollProvider
to wrap all pages in the provider, e.g.The odd behavior that I'm seeing, however, is shown in the attached image.
You'll see that for some reason there are two scrollbars. Additionally, there seem to be two Scrolls in context. Utilizing
const {scroll} = useLocomotiveScroll()
provides me with the scroll context, and calling the.stop()
method on it stops only one of the scrolls.The real question here is why am I getting two scrolls? It's creating extremely strange behavior as you might expect.
The text was updated successfully, but these errors were encountered: