How can I prevent the whole site from scrolling when creating a scrollable section within a pop up in Webflow?
TL;DR
- Design a pop-up in Webflow, wrap it in a full viewport container, and set fixed height for scrollable content within.
- Use interactions to toggle
overflow: hiddenon the body when the pop-up opens and revert it on close, then test to ensure proper functionality.
To prevent the whole site from scrolling when creating a scrollable section within a pop-up in Webflow, you need to ensure that only the pop-up content is scrollable. Here's how you can achieve this:
1. Set Up Your Pop-Up
- Design your pop-up within Webflow Designer to contain the specific content that needs to be scrollable.
- Make sure the entire pop-up element is wrapped in a div or a similar container.
2. Target the Pop-Up Container
- Select the main pop-up container in the Webflow Designer.
- Ensure this container spans the full viewport (100% width and height) to cover the entire screen when activated.
3. Create Scrollable Content
- Within your pop-up, select the inner content div that you want to be scrollable.
- Set this div's height to a fixed value to enable scrolling (e.g., 400px).
4. Disable Body Scrolling on Pop-Up Activation
- Use Webflow Interactions to disable scrolling on the page body when the pop-up is visible.
- Apply an interaction that, upon opening the pop-up, adds a custom class to the
<body>element that setsoverflow: hidden.
5. Re-enable Body Scrolling
- Set an interaction to remove the body class on pop-up close. This action returns the body’s overflow setting to
autoor whatever your normal setting is.
6. Test Your Setup
- Preview and test your site to ensure that opening the pop-up stops background scrolling and only the pop-up content is scrollable.
Summary
To make a scrollable section in a pop-up without affecting the rest of the Webflow site, create scrollable inner content with a fixed height, use interactions to disable and enable body scrolling, and wrap your pop-up appropriately for full screen coverage.
