Body not resizing properly when smooth:true

[Avisseau]

Hello 👋

Describe the bug

On last version 3.2.5.

When smooth="true" , depending on the resize : bigger or smaller body will not adapt to the js-scroll container creating a white space under the page or cropping the footer.

We've tried to force the resize to update the container with scroll.update(). We also copied the style from your demo (html, body & scroll container) without any good result.

To Reproduce

You can see our issue here

Expected behavior

Basically the same behavior as when smooth = "false";

Desktop:

• Tested in Windows and OS
  • Chrome, Mozilla & Safari latest version.

We love LS thanks in advance for your help 👊

[ajayns]

I figure it could be due to device pixel ratio. It seems to be working fine on my Macbook's display while messing up on my external.

[pierrenel]

Seeing the same issue in Gatsby - loads of extra space at the bottom of the page.

[ajayns]

Oh yes, I am using Gatsby too - this might be Gatsby specific then.

[ajayns]

A duct tape fix to this I found out would be to call update() function on timeout of a suitable time like 2-4s and it seemed to work okay. I'd like a more solid fix to the problem though

[flowen]

@ajayns & @pierrenel also on Gatsby, but the opposite, the height is too small. When I check the limit property on the scroll instance it's simply incorrect. It must be some timing issue. I have a simple test with a container with 1500px height. Performing the .update() function changes the .inertia prop from 1 to 0.1

[mlaborde]

Hi guys! I've been having the same issue with locomotive and found a temporary workaround by looking at how virtual-scroll works Maybe you can try it:

//Using jquery for handling resize event

$(window).resize(function(e) {

locomotiveScrollInstance.update();
//DeltaY of 1 so event is effectively triggered
var wheelEvent = new WheelEvent("mousewheel",{deltaY:1}); 
//Element selector used for locomotivePlugin
$("body")[0].dispatchEvent(wheelEvent);

//TO DO Trigger events for touch and ms touch events (touchmove, MSPointerMove) });

Hope it helps!

[ajayns]

@flowen Yep, I've seen that as well. I've tried out a couple of things with Timeout functions to update the instance to wait till everything's loaded before measuring but it still seems to be unpredictable.

@mlaborde Hey! Thank you but your solution seems to be only for window resizes, here we're talking about the initial state itself that renders wrong.

[ajayns]

Upon deeper inspection, I've found out that the problem seems to stem from the fact that when LS creates a scroll instance on render, it sets an offsetHeight to limit that is quite lesser than the actual value. I'm thinking this could be something to do with the order of invoking or content not being loaded as it is called.

[CorentinBernadou]

Hey guys! Same issue with React JS (when resizing the window).

[chrislind]

Same issue with normal javascript. No other framework used.

[CorentinBernadou]

The issue about resizing the window is also present on the official Locomotive scroll website. Martin Laxenaire posted his solution here : Bug on resize after having reached the bottom of the page #56 (— But does not work for me) Hope someone could find how to fix this issue.

[ajayns]

@imcorentin Good catch there finding that on the official site.

I just realized though that half the mentions here were about different errors - it seems to be a mixture of resizing errors (which is what's initially mentioned) to scroll issues onload for Gatsby/React. I've created a new issue (#81 ) to look into that matter specifically so that this issue is specifically for the window resize issue.

[blksnk]

Same issue when using Vue, though the bug isn't consistent. On some pages, LS works perfectly fine: limit is properly set on render, while on others it seems to either be to much or too little.

I've been struggling to find the culprit, since I use the same code to initialize LS on all pages. Maybe a method to hard-set the instance limit could provide a temporary fix ?

[ajayns]

That could be a temporary workaround yes, will look into a instance limit setter.

[Jerek0]

PR #82 should resolve resizing issues.

If you have an incorrect scroll size (too long / short) at first state on your page: it probably comes from a layout change that occurred after LS init (e.g. an image loaded). Try resizing your window: it probably fixes the scroll.

To fix that for real, you need to call .update() on your LS instance after layout changes to refresh calculations.

EDIT: 3.3.5 fixes an important issue with update. Make sure to upgrade!

[julienlucas]

I have solved the problem of the extra space at the bottom on Gatsby with a overflow: hidden on the body... it worked for me.

[rodolfosarno]

PR #82 should resolve resizing issues.

If you have an incorrect scroll size (too long / short) at first state on your page: it probably comes from a layout change that occurred after LS init (e.g. an image loaded). Try resizing your window: it probably fixes the scroll.

To fix that for real, you need to call .update() on your LS instance after layout changes to refresh calculations.

EDIT: 3.3.5 fixes an important issue with update. Make sure to upgrade!

Hey @Jerek0 are you able to give me a hand with this issue? The scroll size is always too short when I access the page for the first time. If I resize the window the scroll works fine or if I refresh the page as well.

Here's my code.

  (function() {

    document.documentElement.classList.add('is-loaded');
    document.documentElement.classList.remove('is-loading');

    setTimeout(() => {
        document.documentElement.classList.add('is-ready');
    },300) 

    setTimeout(() => {
        const scroll = new LocomotiveScroll({
            el: document.querySelector('#js-scroll'),
            smooth: true,
            getSpeed: true,
            getDirection: true,
                        inertia: 0.75,
            useKeyboard: true
        });

        scroll.on('scroll', (instance) => {
            const progress = 360 * instance.scroll.y / instance.limit;

            document.documentElement.setAttribute('data-direction', instance.direction)

        });
        scroll.update();
}, 1000)

})();  

I'm using Locomotive 3.3.11.

Cheers

[Jerek0]

@rodolfosarno Unfortunately I can't help you with just that small section of JS code. But as I said earlier (and you quoted that) :

If you have an incorrect scroll size (too long / short) at first state on your page: it probably comes from a layout change that occurred after LS init (e.g. an image loaded). Try resizing your window: it probably fixes the scroll.

To fix that for real, you need to call .update() on your LS instance after layout changes to refresh calculations.

You probably have some images that are not fully loaded at the moment you launch locomotive-scroll. Try bumping that timeout to 10 seconds and see if you have a correct scroll size after such a delay. If so, you need to call .update() each time an image has fully loaded.

[rodolfosarno]

@Jerek0 Thanks for your response. I had increased the timeout to 2 seconds and it seems to be working now. Cheers

[superlulu]

Same error with Vue. Still no fix available? scroll.update() with a timeout didn't help. Hope for a fix soon as LS would be a dream to use!

[jpcarpenter]

@superlulu +1 for me as well – using Gridsome. For me, everything works beautifully when running gridsome develop, it's when the site is built, the giant whitespace below the last data-scroll-section appears. I tried using the timeout and setInterval methods mentioned on issue #81, but those didn't help either. I would absolutely love to use this, but after spending countless hours trying to find a fix, I'm about to shelf the idea .

[MoinShaikh611]

I have solved the problem of the extra space at the bottom on Gatsby with a overflow: hidden on the body... it worked for me.

This helped in gatsby Thank a lot 🤟🤟🤟🤟🤟🤟

[stillingdesign]

Setting the body max-height to 100vh helped solve some issues for me.

[sagnik369]

That's because you did not link the CSS file for the locomotive scroll

[theaakashd]

This is the code that worked for me

// locomotive-scroll
(function () {
    const locoScroll = new LocomotiveScroll({
        el: document.querySelector("[data-scroll-container]"),
        smooth: true,
    });

    setInterval(() => {
        locoScroll.update();
    }, 2500);
})();