Streaming live at 10am (PST)

Remove scroll when fullscreen nav-menu is open without removing scrollbar

Hi everyone,

Here’s the share-link for the menu : Webflow - Menu test
I’m running into an issue with my fullscreen nav-menu. I used custom code to disable the scrolling once the menu is open, but it REMOVES the scrollbar and makes the overall look of the opening animation janky and unpleasant. When the scrollbar disappears, it adds width to the window and pushes the contents to the right.

I have used this custom code I found here on the forum :

// Stop body scroll when full menu is open
const body = document.body;
function letBodyScroll(bool) {
    if (bool) {
      body.style.overflow = 'hidden';
    } else {
      body.style.overflow = 'visible';
    }
}
const targetNode = document.querySelector('.w-nav-button');
const config = { attributes: true, childList: false, subtree: false };
const callback = function (mutationsList, observer) {
    for (let i = 0; i < mutationsList.length; i++) {
        if (mutationsList[i].type === 'attributes') {
            const menuIsOpen = mutationsList[i].target.classList.contains('w--open');
            letBodyScroll(menuIsOpen);
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

Is there any way to get around this? My google searches haven’t been fruitful so far…

Thanks in advance for any help,
Vincent

Hi Vincent,

without a link, I can’t tell if this would work, but you could use the animation to trigger a Div-Element to overlay your site. Set it to take up 100vw and 100vh, making it full screen and the user should not be able to scroll anymore.

With the Z-Index you can control which elements are blocked and which are still accessible.
The scrollbar would still be visible and there would be no shifts in your layout.

Just remember to hide the Div again when done.

Hope this helped!

Cheers
Leon

Hi @LeWolf, thank you for the quick response.
I made a share link with just the menu so it’s easier for you and others to aid me : Webflow - Menu test

Perhaps you’ll have more luck than me. I tried to see if what you suggested would work, but haven’t been able to keep it from scrolling behind. The issue is really when the scrollbar disappears, it adds something like 15px to the width of the window and the contents move making it weird when opening/closing the menu.

Thanks in advance for any further advice.

Hi @vincentgravel441,

thanks for the link, now I understand your problem.
Two easy solutions I can think of:

Adding 15px padding to your body element and using the disappearing scrollbar.
This would stop the layout from shifting.

Colorizing the scrollbar while being in the Navigation menu via webkit-scrollbar-track and the other modifiers, found here. You might need to check for browser support though.

There are probably some more solutions including code, but I’m not comfortable enough to give that kind of advice.

Cheers
Leon