Streaming live at 10am (PST)

Prevent Body Scrolling on Mobile Navigation Open


#1

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: https://preview.webflow.com/preview/the-natural-barber-co?preview=b9c63c0020d888d6f5f04077f1ab8985

Thanks in advance!


#2

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


#3

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


#4

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;
        }
    }
    
    .background-content{
        height: 100%;
        overflow: auto;
    }

Docs her: https://github.com/Luxiyalu/scrollable-overlay
Demo: http://www.luxiyalu.com/playground/overlay/


#5

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

1/2

2/2


#6

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


#7

Please add URL (Wierd)

Test this on mobile - works great (Android + Chrome) (We put this idea on webflow)
http://www.luxiyalu.com/playground/overlay/


#8

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

https://www.thenaturalbarber.com/home


#9

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


#10

Hi All - I created a cloneable solution that works on iOS here: https://webflow.com/website/Lock-Body-Scroll-Including-iOS?s=body-scroll-lock