Disable Scroll when Fullscreen Menu is Open

Hi all,

So I recently added this smooth scroll script, so I had to put all contents into a div block.
Now I’m facing a problem where when the menu which is (fullscreen) still allows to scroll even though I have set its position to fixed.

Any help would be much appreciated!

Kind regards,
Karl

Here’s a link to my site:
https://laurmedia.webflow.io/


Here is my site Read-Only: https://preview.webflow.com/preview/laurmedia?utm_medium=preview_link&utm_source=dashboard&utm_content=laurmedia&preview=9e80ad647d58b9322765bd8c54a411e5&mode=preview

Check this out:

https://classadder-howto.webflow.io/#use-case-2

I hope it helps

Carl, tomorrow I’ll definitely look at your project. I assume you inserted luxy.js for smooth scrolling? if yes, then see: this script prohibits the use of elements with a fixed position. Therefore, you need to render the ABOVE divblock with luxy.js. your menu should not be inside a smoothly scrolling div

I’ll have a look at it. Thank you!

Thanks for the reply!

Yes you’re right, I did use the luxy.js.
I’ll try that now and see if there’s any luck and I’ll an edit in this reply.

Thanks again.

EDIT: it fixed the locking of the position of the menu items but the scroll is still there :confused:

Tried it but didn’t seem to work for me unfortunately.

The Finsweet approach does work but body scoll is triggered by the user clicking / pressing the nav menu button directly. Personally I feel safer detecting the css classes that the nav menu button has to determine if it is open or not, then to respond accordingly by allowing the body to scroll / not scroll.

I handle this with custom code by using a mutation observer on the nav menu button element. When the nav menu button has class w--open, it means that the menu is open, so body overflow is hidden which stops scrolling. Then when w--open is removed, body overflow is set back to auto to allow scrolling.

Add this to your site wide body code:

<script>
    // Stop body scroll when mobile menu is open
    const body = document.body;
    function letBodyScroll(bool) {
        if (bool) {
                body.style.overflow = 'hidden';
        } else {
            body.style.overflow = 'auto';
        }
    }

    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);
</script>

FYI if you have multiple webflow navbar elements on the page this will only work for the first one.

13 Likes

Firstly, you do not have a smooth scroll.
Secondly, see my published link.
You throw all the content into a div with id “luxy”. And the menu is above this block.
And finally, so that the menu opens in full screen and does not scroll, you need this script:
https://www.flowbase.co/guides/guide-lock-scroll-on-click

my project
https://georges-trendy-project-a05e84.webflow.io/karl

https://preview.webflow.com/preview/georges-trendy-project-a05e84?utm_medium=preview_link&utm_source=designer&utm_content=georges-trendy-project-a05e84&preview=397d3fbcf00f353718ec2a799ba30bc7&pageId=5f02f469e56c0eb8854b313f&mode=preview

This is excellent @jasondark Thanks for this mutation observer approach. One issue i face here is if i close the nav, the body is still locked. Did you find a way to unlock that after the menu close?

The code snippet I left above should take care of that. Maybe check the console in your browser for errors.

1 Like

Working perfectly man :love_you_gesture: thanks so much Jason :kissing_heart:

Hi @jasondark ,

Thank you so much for sharing the custom code. Works flawlessly. How would you implement it this for when the cart panel is open?

Looking forward to your assistance. Thank you!

Hey @jasondark
When i’m scrolling down and open the menu it is still scrollable. But when i’m scrolling up it isn’t. Any idea why this is the case and how I can fix this issue?

Btw this happens online on mobile!

Hey @jasondark

Your above script was so close to solving a super similar issue I am having on my site, as well. Can you take a look for me?

https://preview.webflow.com/preview/nots?utm_medium=preview_link&utm_source=dashboard&utm_content=nots&preview=b24e3bdbb48a7da623b7c99885c72ed8&workflow=preview

I’m struggling to lock the body from scrolling when the hamburger menu opens. It happens on desktop through mobile view. Also, my nav bar animates up and away which pulls the menu out of view by 95px. The issue is when the body is scrolling behind the hamburger menu, the hamburger menu goes up 95px too.

Hi @jasondark, your custom code worked perfectly, thank you! I’m trying to get it to work only on mobile and not on desktop - is there a way to apply it just to certain breakpoints?

Hello everyone,

I have a similar problem, only in my case I used an animation on my mobile nav element that triggers another (mobile nav dropdown) element when clicked so it pops up. When you click it for the second time, the mobile nav dropdown disappears again.
This means I don’t have 2 different classes which won’t make it work in my case.

Does anybody knows how I should tackle this problem?
Thanks in advance for any tips & help :slight_smile: