Streaming live at 10am (PST)

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:

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.

2 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:

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: