Showing 2 Vertical Scroll bar

[imprathamesh]

Hello, after starting the locomotive the page showing 2 vertical scroll bar. and If I redirect another page then on that page show 3 scroll bar.

[obinasBaba]

@imprathamesh That is because you are initiating Loco motive multiple times, A locomotive scroll bar represents an instance of locomotive, Where do you initialize it? Are you using react 18? Provide more information so we can help you.

[heyadeivan]

Hello, after starting the locomotive the page showing 2 vertical scroll bar. and If I redirect another page then on that page show 3 scroll bar.

you can use locoScroll.destroy();

and then init before page load

locoScroll.init();
locoScroll.start();
locoScroll.update();

[imprathamesh]

@imprathamesh That is because you are initiating Loco motive multiple times, A locomotive scroll bar represents an instance of locomotive, Where do you initialize it? Are you using react 18? Provide more information so we can help you.

I m using Blazor WASM which is SPA. here is my code.- I added code in site.js file and import it into index.html

site.js `function callLocomotive() { const scroll = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true

});
scroll.Init();

}`

[imprathamesh]

Hello, after starting the locomotive the page showing 2 vertical scroll bar. and If I redirect another page then on that page show 3 scroll bar.

you can use locoScroll.destroy();

and then init before page load

locoScroll.init();
locoScroll.start();
locoScroll.update();

Ok. I will let you know

[imprathamesh]

Hello, after starting the locomotive the page showing 2 vertical scroll bar. and If I redirect another page then on that page show 3 scroll bar.

you can use locoScroll.destroy();

and then init before page load

locoScroll.init();
locoScroll.start();
locoScroll.update();

I tried as you said but it is not working. Is there any solution for blazor WASM.

[flavio-ever]

Hi everyone, I'm also having the same problem. Two scrollbars in a Nextjs application, however I'm using the "react-locomotive-scroll" lib and I have only 1 provider, it's pretty confusing...

Print https://prnt.sc/q9kC7xjd8V8N

[Andy0926]

To fix the issue, you may remove the react.strictmode from the index.js to prevent double render

[BryantHustles]

Had the same issue and removing strict mode resolved the issue for me.

[Vijay1667]

To fix the issue, you may remove the react.strictmode from the index.js to prevent double render

yes this works.

[chitandaer]

要解决这个问题，你可以从索引.js中删除react.strictmode，以防止双重渲染

This is a good method, how should vue handle this too difficult

[bradley]

Adding on here that this also fixed the issue for me. More directly, in Nextjs 13 at least (likely works with Page router as well), you can add the following to your next.config.js:

const nextConfig = {
  // Removing strict mode is required in order to get locomotive scroll working
  // properly in our Next.js app. This is a known issue with locomotive-scroll
  // and Next.js. https://github.com/locomotivemtl/locomotive-scroll/issues/458
  reactStrictMode: false,
  ...
};