Disable background scrolling when mobile menu is active (opened)

Design help Custom code
10

Hey guys,

I have been tinkering with this problem and found a solution. (Better solution is probably out there)

Add this code before the </body> tag:

<script>
Webflow.push(function() {

	var clicked = "false";
  
  $('.w-nav-button').click(function(e) {
    e.preventDefault();
    var overflowState = 'auto'

    if (clicked == "false") {
    overflowState = 'hidden';
    clicked = "true";
    } else {
    overflowState = 'auto';
    clicked = "false";
    }
    $('html, body').css('overflow', overflowState);
  });
});
</script>

Add height: 100% in your body(All Pages) inside Webflow Designer.

Thats all! And the cool thing is that you don’t need to change anything in the code.

REQUIREMENTS:

  • This requires that you use the navbar element, Webflow gives you.
  • Nav Menu has to fill the screen.(100vh) If the user clicks out of the menu, it will collapse and the scroll will still be disabled.
    *REMEMBER to change body(All Pages), height: 100%.

Happy designing :slight_smile:

-David

EDIT 1: IOS Safari does not acknowledge overflow hidden when placed inside of <html> or <body>. I checked how Apple made their navbar not scroll at Apple.com, but it looks like they do just, what the afore mentioned article states doesn’t work. Testing showed that only applying overflow: hidden to the <body> tag, would not work. But applying overflow: hidden to both <html> and <body>, solved the issue. The only thing now is elastic scroll, being a bit ugly.

EDIT 2: Changed code to align with EDIT 1.

8 Likes