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


#11

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: https://preview.webflow.com/preview/lock-body-scroll-d6e91f?utm_source=lock-body-scroll-d6e91f&preview=d32e7ea2c0b7220b945ed0d5dc541ca3

URL: http://lock-body-scroll-d6e91f.webflow.io


#12

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?