Blank space on the end of the footer

[dimitris-bracket]

Hello,

i am using smooth scroll option and i face a problem on load, when the scroll is finished, it lefts a space below the footer, when i resize the screen it fixes, i have tried many solutions like, scroll.update with a big time out after the window load, scroll update with imagesloaded library, but still isnt working, the header as you may see below is position fixed outside the container.

The markup is:

Any idea?

[studiolex]

Same problem here

[jankohlbach]

@dimitris-bracket cannot see an image or any markup, did you forget to attach it? also have the problem, that from time to time, the scroll ends a little bit to early ... but it really sounds like it's a problem with stuff that loads really late for you 🤔

[abdipramana]

Are you already import the CSS file to your code? As my issue before, the blank space appears because the CSS file is not imported.

[theaswath]

This seems to be a recurring issue that a lot of people have reported but still hasn't been addressed.

[e11world]

I'm having a similar issue and many others as well (side to side scrolling not working on mobile) and is making me not want to use or ever go back to Locomotive again.

[jillianadriana]

Also happening here.

[sopu175]

if there is any accordion or tab which is causes for update the view port height then add ScrollTrigger.refresh();

[adeleke5140]

@sopu175 Where should I add this ScrollTrigger.refresh() call

[quadroloop]

I encountered this while using Locomotive Scroll with NextJS

I fixed it by getting locomotive-scroll.css file here:

Steps: 1.) create a local file locomotive-scroll.css 2.) import it in your '_app.tsx' or '_app.js' in the pages directory.

It seems that loading the css file using <link rel="stylesheet"../> is not enough. If your not using NextJS or React, try looking into the way you are importing the CSS file: locomotive-scroll.css

[eichenlauba]

Same problem here.. Any solution to fix this behavior?

[quadroloop]

Same problem here.. Any solution to fix this behavior?

Try adding the this CSS file in your project: locomotive-scroll.css This fixed the issue for me, make sure it is added on the page where you use locomotive scroll.

[eichenlauba]

Same problem here.. Any solution to fix this behavior?

Try adding the this CSS file in your project: locomotive-scroll.css This fixed the issue for me, make sure it is added on the page where you use locomotive scroll.

Thanks for your reply but this file is already loaded and added to my page. The blank space at the end of the page is still here :(

[quadroloop]

Thanks for your reply but this file is already loaded and added to my page. The blank space at the end of the page is still here :(

Can you share how you load the file? In my case, I'm using react with NextJS, and I had to import that locomotive-scroll.css file in _app.tsx so that it loads to the page before I initialize a locomotive scroll instance.

[eichenlauba]

It's a simple link in my index.html file : <link rel="stylesheet" type="text/css" href="src/locomotive-scroll.css"/>

It's a training project based on parcel template (onepage with only html/css/js).

[reda-redimpact]

Are you already import the CSS file to your code? As my issue before, the blank space appears because the CSS file is not imported.

Worked for me.

[filonenkoweb]

nobody found a solution?

[v-pluhin]

I had the same problem, solution was init LacomotiveScrooll after all plugins inits. because LacomotiveScrooll calculate height and it can be a problem if you have accordion or slider

[BaoTruong-dev]

I encountered this while using Locomotive Scroll with NextJS

I fixed it by getting locomotive-scroll.css file here:

Steps: 1.) create a local file locomotive-scroll.css 2.) import it in your '_app.tsx' or '_app.js' in the pages directory.

It seems that loading the css file using <link rel="stylesheet"../> is not enough. If your not using NextJS or React, try looking into the way you are importing the CSS file: locomotive-scroll.css

This work for me, thank you so much!!!

[tbandini]

Same problem here.. Any solution to fix this behavior?

Try adding the this CSS file in your project: locomotive-scroll.css This fixed the issue for me, make sure it is added on the page where you use locomotive scroll.

Worked!

[samfairbairn]

Also experienced this issue, not because the Locomotive css file isn't included but because sometimes the appropriate Locomotive classes, has-scroll-init has-scroll-smooth that include the overflow: hidden are not added to the html element on initialisation, so you end up with double scroll, native scroll + Locomotive scroll.

It appears to be a bug but you can resolve it by adding overflow: hidden to the body and html yourself.

For context I'm using Gatsby and react-locomotive-scroll, so the LocomotiveScrollProvider is re-initialised on each page load, usually it works fine when first landing on the site but is hit and miss when navigating between pages.

related to #486

[sonofjesse]

Also experienced this issue, not because the Locomotive css file isn't included but because sometimes the appropriate Locomotive classes, has-scroll-init has-scroll-smooth that include the overflow: hidden are not added to the html element on initialisation, so you end up with double scroll, native scroll + Locomotive scroll.

It appears to be a bug but you can resolve it by adding overflow: hidden to the body and html yourself.

For context I'm using Gatsby and react-locomotive-scroll, so the LocomotiveScrollProvider is re-initialised on each page load, usually it works fine when first landing on the site but is hit and miss when navigating between pages.

related to #486

This worked for me

[Sandip123samanta]

Still not worked !!

[sirhenryhu]

Still not worked !!

Hi @Sandip123samanta, I'm answering you since you're the one still looking for the solution in Sep 2023: please refer to another issue #408 published in Mar 2022.

I'm a non-techie therefore I cannot explain it well, it might be better to see the full explanation on that thread. I hope this method helps. Good luck.

[Rowdysign]

Same problem here, and overflow: hidden on body and html does not work.

[Alapottra-troj1n]

By adding css file or using the overflow hidden method. It does takes away the blank space but it also makes my footer disappear or gets cuts down by overflow. It shows a bit of the top slighty and cuts out bottom

[mohdafwan]

I also have this issue i just Add this css link in the head tag in My .htm file. "https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css"

[codercredit]

still not worked

[keriheuer]

Sharing this in case it works for anyone else. I'm not a developer by any means, just a grad student fiddling around with my website. I got the blank space after my footer to go away with 2 things:

1. before installing Locomotive, I had only html, body { overflow-x: hidden } in my css so I changed that to overflow: hidden

2. I'm using Locomotive on my Jekyll (static) site and could only get it to work if I wrapped everything inside body in a <main> div and initialized the plugin at the end of the _default.html (in _layouts folder). For some reason, I can't scroll at all if the initializing code is in the footer (which I tried per someone's suggestion above to initialize Locomotive after any/all other plugins).

I did, however, put code to refresh the scroll instance in the footer (suggested in a few other issues on here) and that seemed to do the trick. Both of these code snippets had the same effect of getting the footer to show up after all other sections and at the bottom of the viewport.

code added to the end of _footer.html:

window.addEventListener('scroll', () => {
scroll.update();
});

// OR

document.addEventListener('DOMContentLoaded', function() {
  scroll.update();
  });

[pacheco90]

when add the css code my project placed position fixed, and when i scroll doesn't function the scroll because the elements stay fixed.