Streaming live at 10am (PST)

Prevent Body Scrolling on Mobile Navigation Open


Hi there,

Struggling to find an up to date way to prevent body scrolling upon opening a fullscreen mobile navigation menu, and then enabling body scrolling upon closing the fullscreen mobile navigation menu.

This is a read only link to the project - please navigate to the home page:

Thanks in advance!


Your read-only link not working (I get this message)
Site migration failed, please contact support.


Sorry! Have updated the link. Works now :slight_smile:


First, remove the 200vh height (Use 100vh). Next try this (± your idea):

Better Solution // PURE CSS // No custom code

On the forum you find solutions withoverflow: hidden; on body.

body.noScroll {
      overflow: hidden;

“The problem”

It automatically scrolls everything to the top (Bad User Experience)

Try this idea/Code (Almost the same):

 html, body {
        height: 100%;
    .overlay{ //your fullscreen mobile navigation 
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);

        .overlay-content {
            height: 100%;
            overflow: scroll;
        height: 100%;
        overflow: auto;

Docs her:


I try this (Zero JS) - works fine. But you should test this on mobile and so on (Live URL)




Thank you @Siton_Systems - I can see this works in Webflow preview but it doesn’t work live on desktop or mobile unfortunately.


Please add URL (Wierd)

Test this on mobile - works great (Android + Chrome) (We put this idea on webflow)


I’ve gotten it to work now on desktop but not on iOS unfortunately. Is there a workaround for this?


Works fine on android and Desktop (Also the others code you find buggy on IOS).

You have endlees issue with prevent and IOS:

Try to add this to the body:

body {
-webkit-overflow-scrolling: touch;

Read more:

Sorry i need iPhone to test those solutions :slight_smile: + accses to the project - but the solution is close


Hi All - I created a cloneable solution that works on iOS here:


Hi Cjh, thank you very much for the solution. It seems to work pretty well for me, but just a small issue which I cannot figure out. I have cloned your project and when i publish my version I seem to et two scrollbars and when the overlay reaches the bottom of scrolled div, the background content div starts scrolling. Any reason why that is?

Share link:



Sorry, never mind this message. I have fixed it. My open button had the wrong class. I assumed webflow clone would rename it the same?