Back to Blog

Lock Page Scrolling in Webflow

Stop page scrolling when a user clicks a button. Perfect for menus, and modals.

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.

OTHER GUIDES & LESSONS

Boost your webflow site further.

Join Over 30,000
Creators Today

Join our newsletter list for occasional updates, products and insights.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join 30,000+ other creators across our communities.