Streaming live at 10am (PST)

Disable background scrolling when mobile menu is active (opened)


#1

When the mobile menu is active (overlay) want to prevent that the body is scroll able, disable scroll for body.

There are several guides how to do this for a modal popup but not for a mobile menu overlay.

Any feedback would be appreciated!


Here is my public share link: https://preview.webflow.com/preview/final-marketing?preview=7c8084bd169a671fade35c7d7b6e0624


Disable Scrolling when Nav Menu is open
Forbid background scrolling
Help creating full-screen mobile nav
Prevent background scrolling on mobile
#2

You probably already saw this one, but thought I would include just in case:


Prevent Body Scrolling on Mobile Navigation Open
#3

Thank you Joe Hoff for link, did saw that.

When your using that Javascript, it based on a separate open and close button. In this case the hamburger menu is the open and close button. So instead of "click" state it should be something else?

<script>
Webflow.push(function() {
  $('.menu-button-class').click(function(e) {
e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

  $('.menu-class-name').click(function(e) {
e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>

[TUTORIAL] Make mobile menu SCROLLABLE
#4

Hey !
I jump in this thread as I'd love to figure this out as well...


#5

has anyone figured this out? i am having the same issue. tried the code and couldn't get it to work.


#6

I'm going to add that I'd like to know a solve for this as well. I made a button that opens an overlay menu (100 vh) on mobile, but on IOS the bottom chrome buttons appear when the menu is first opened, if the user engages with the overlay menu, the chrome buttons go away (good) but the site is visible and scrollable where the chrome buttons were (bad). The scrollable site only appears briefly, but it looks like a bug.

Any suggestions or help?

Thanks!


#9

Hi there,

I have a Nav Menu on tablet and mobile and when I open the menu I don’t want people to be able to scroll. What is the best way to do this?

Thank you.

https://preview.webflow.com/preview/oristatlender?preview=eaec018dfd94cd0ca8d9aea44a444c19


#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.