Lock Page Scrolling in Webflow

Overview 📚

With this simple bit of code we can lock page scrolling with a toggle on and off.

This can be useful when using a custom menu, or popup overlay where we want to restrict the user from scrolling the page.

To add this into your project, follow the simple steps and add the custom code into your project or page settings.

{{ Template "gist" "text:Before </body> tag" "id:f781787d5fd5ca022018e1d769bff571" }}

Instructions ✍️

1. Add the script to your custom code settings.

The element that we use to lock our scrolling will communicate with the small code snippet. Add the code into your Before </body> tag in custom code settings.

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

‍

2. Add the class .lock-scroll to your element.

Add the class 'lock-scroll' to the element which will toggle our lock on and off.

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