How can I freeze the body content while allowing the content in the Webflow lightbox to scroll separately?

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-scroll class to the body when the lightbox is opened.
• Create another interaction to remove the body-no-scroll class 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.