How To Prevent Body From Scrolling When Navigation Menu Is Open

cr: Sabanna

discourse page

If you want to know how to prevent the body from scrolling when a modal window is open, this custom code will do just that. This snippet works when you use Webflow’s Navbar Component and will prevent the page from scrolling when it is open

The custom code is long because there is a bug when iOS doesn’t prevent users from scrolling past the modal if there is content that exceeds the viewport height, despite adding overflow: hidden in the CSS.

iOS bug created in 2016 was solved only in May 2019 but they have no idea when it will be released.https://bugs.webkit.org/show_bug.cgi?id=153852

So the code is updated with additional enhancement which detects the device's OS and makes a bit of a different approach if it is iOS.

Publish the site and test it :)

Webflow custom code library

Webflow - Code to the Rescue

The Webflow Library for custom code snippets that unlocks powerful possibilities in Webflow. Includes hand-picked and tested custom code that you can use in Webflow Projects.

Open Library
🚀

Need further help?

Need further help in understanding the resources or how to implement them? Feel free to reach out

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Ali Saeed Graphic Designer Kuwait

About Ali Saeed

Ali Saeed is a Kuwait-based web designer and Webflow developer who has been working as a graphic designer for 4 years, building social brands, company profiles, and presentations. He recently jumped into web design and development. As a web designer, Ali focuses on clarity in design layout and messaging strategy. In his free time, he loves to help the web community, solve problems, and build resources for web designers who want to optimize their websites using Webflow.

Send an email if you'd like to collaborate :)
View his portfolio website