Lock Page Scrolling in Webflow

Learn how to disable page scrolling in Webflow with this simple custom code tutorial. Great for menus, popups, and overlays. Copy + paste ready.

July 11, 2025

Min Read

Peter B

Product & Development

@flowbase

How to Lock Page Scrolling in Webflow with a Simple Code Snippet 🔒

Need to prevent page scrolling when a menu or popup is open? Here’s a quick and easy way to lock and unlock scrolling in your Webflow project using just a few lines of custom code. This technique is especially helpful when creating custom menus, overlays, or modals where you want to restrict user interaction with the background content.

What This Does ✅

This scroll-lock trick disables page scrolling by toggling the overflow: hidden style on the <html> element. With one click, you can lock or unlock scrolling dynamically using a trigger element—like a menu toggle or modal close button.

Clone or Preview 🔗

Want to test it out before adding it to your project?

👉 Clone this Webflow project
👀 Preview the live demo

Instructions ✍️

1. Add the script to your custom code settings.

Paste the following code into your Project Settings → Custom Code → Before </body> tag, or into the Page Settings if you only need it on specific pages.Add the code into your Before </body> tag in custom code settings.

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

<!-- Lock Webflow Scrolling Script -->
<script type = "text/javascript" > $('.lock-scroll').on('click', toggleScrolling);
function toggleScrolling() {
	$('html').toggleClass('no-scroll');
} 
</script>

💡 This code listens for clicks on any element with the .lock-scroll class. When clicked, it toggles the no-scroll class on the <html> element, which prevents the page from scrolling.

‍