Our shop section is coming soon, watch for updates! Shop now
Guide

Lock Scroll

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

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.

Tom Bekkers
Details
Lock Scroll
Simple tutorial on locking the website scroll when a menu (div) is open.
Preview ProjectClone Project

Discussion

Other Guides

Guide
CMS Lightbox
Oramsdesign
Guide
Social Share Button
Waldo
News, Updates & Clonables

Join the newsletter for updates

Join 600+ webflow community members.
Welcome to the club. Cool stuff coming your way.
Oops! Something went wrong while submitting the form.