DEV Community

Discussion on: How to Locomotive Scroll and Nuxt (with example and gotchas)

Collapse
 
davidmarkl profile image
David Markl • Edited

Thank you for this great post. I only run into one Problem:
In my nuxt layout i have the nuxt component and a footer. Now if i wrap a page in the LocomotiveScroll component it will only calculate the height of the page and leaves my footer out. The result is that im not able to scroll to my footer beacause its height is not beeing respected in the locomotive calculation.
Do you have any good solution exept for just wrapping the whole layout in the Locomotive component?

Collapse
 
didomarchet profile image
Davide Marchet

Hi,
can you share the code ?
Have a nice day,

Davide

Collapse
 
davidmarkl profile image
David Markl

I reproduced my Problem.
Here is the Code:
github.com/davidmarkl/locomotive-s...
And here is it in production:
jolly-murdock-e4a35b.netlify.app/

Thread Thread
 
didomarchet profile image
Davide Marchet

Hi,
the issue is related to the css.
If you remove the overflow: hidden from html and body and you set as sizes {
....
height: 100vh;
overflow: hidden;
}

to .js-locomotive you have the locomotive wrapper and your footer.
But the page will have two scrollbar.

I think It's better use it ad a wrapper.

Have a nice day,

Davide