Issue when navigating pages

[nzerk]

Hi there, thanks heaps for your repo.

I have tried to implement it on my site, but I find that when I change pages the scroll seems to be doubling up.

It scrolls twice as quick and adds a full pages worth of spacing under the content.

Do you have any suggestions?

[fcisio]

Hi @nzerk This sounds to me like you are missing the location callback.

The location is triggered on route change

See this file

const Layout = ({ children, location }) =>

<Scroll callbacks={location} />

If the location is not provided as a callback, the previous scroll instance is never destroyed before a new one is created.

---

It could also be that there is something funky happening with the conditional for destroy.

Try logging locomotiveScroll to see if the condition is simply failing.

if (locomotiveScroll) locomotiveScroll.destroy()

[kkarkos]

Just testing this in a gatsby project and I can confirm added spacing under content. It must play together how the plugin calculates the full page size height I guess. I added:

useEffect(() => { setTimeout(() => { window.dispatchEvent(new Event("resize")) }, 1000) }, [])

To trigger event resize which re-calculates the body height.

[fcisio]

@kkarkos In my experience, this is most likely due to an issue with a dependency.

For me, I had the same issue, but it turned out that Emotion.js was the culprit. I'd encourage you to look at your CSS 😉

If you do need to re-calculate the body height, I'd simply use update() from the library instead.