How can I freeze the body content while allowing the content in the Webflow lightbox to scroll separately?
TL;DR
- Identify the lightbox trigger element and ensure the lightbox content is correctly set up.
- Create a
body-no-scrollCSS class, addingoverflow: hidden;andheight: 100vh;. - Use Webflow interactions to toggle the
body-no-scrollclass on the body when the lightbox is opened or closed. - Ensure the lightbox content has enough content to scroll independently.
To create a body freeze effect while allowing the Webflow lightbox content to scroll independently, follow these steps:
1. Identify the Lightbox Trigger and Content
- Locate your lightbox trigger element in the Webflow Designer by selecting the element that opens the lightbox.
- Ensure that the lightbox content you want to scroll independently is correctly set up within the lightbox component.
2. Add a Custom CSS Class for Body Freeze
- Create a custom class named something like
body-no-scroll. - Add the following custom CSS to your Webflow project settings under the Custom Code section in the
<head>area or use an embed element: .body-no-scroll { overflow: hidden; height: 100vh; }
3. Use Interactions to Toggle Body Freeze
- Go to the Interactions panel and create a new interaction for your lightbox trigger.
- Set the interaction to add the
body-no-scrollclass to thebodywhen the lightbox is opened. - Create another interaction to remove the
body-no-scrollclass when the lightbox is closed.
4. Keep Lightbox Content Scrollable
- Ensure the lightbox content wrapper has enough content to scroll (e.g., height exceeds the viewport).
- No additional CSS should be necessary for the lightbox content to scroll as long as it extends beyond its container's height.
Summary
To allow lightbox content to scroll while freezing the rest of the body, add a body-no-scroll CSS class to prevent body scrolling, and use Webflow interactions to toggle this class on lightbox open/close actions. This ensures the background remains static while the lightbox content remains dynamically scrollable.