Return to articles
Lock Page Scroll in Webflow
Tutorials

Lock Page Scroll in Webflow

Simple tutorial on locking the website scroll when a menu (div) is open.

Flowbase
January 5, 2019

Lock Page Scroll when Menu is Open Webflow

With this simple bit of code you can lock the ability to scroll on your website.

This is useful when using a custom menu overlay and want to restrict users from scrolling the page when the menu is open.

Step One

Add the following code into the header section of your page custom code.

<style>
/* Lock Scroll */
html.no-scroll {overflow: hidden;}
</style>

Add the following code into the before body section of your custom code

<script type="text/javascript">
$('.burger').on('click', toggleScrolling);
function toggleScrolling()
{$('html').toggleClass('no-scroll');
}
</script>

This script is basically saying when you click an object with the class '.burger' then we need to toggle a CSS function that sets the overflow to hidden.

Inserting code into head and body of page

Step Two

‍Add the class burger to the your menu button so that on click it will toggle on & off.

Applying class of burger to menu button

Remember to publish and view the live site to see your custom code in action.

ABOUT THE AUTHOR
Flowbase

Flowbase is the leading company for Webflow resources. We provide customers a collection of premium and free resources that help them build better products with Webflow.

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.