Lock Page Scroll in Webflow

Lock Page Scroll when Menu is Open Webflow

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

This is useful when using a custom menu overlay and want to restrict users from scroll 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>

Step Two

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.

Step Three

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

‍

‍

‍