How can I make my Webflow modal scrollable on small screens without affecting the scrollability of the content behind it?
TL;DR
- Add a
modal-openclass to the<body>via Webflow interactions and setoverflow: hiddenin CSS to lock background scrolling. - Set the modal container to
position: fixedand give the inner content amax-height(e.g.,90vh) withoverflow: autoto enable internal scrolling.
To make your Webflow modal scrollable on small screens without allowing the background content to scroll, you need to control the overflow behavior correctly for both the modal and the body.
1. Prevent Background Scrolling When Modal is Open
- Add a custom class to the
<body>tag when the modal is open (e.g.,modal-open). - Use Webflow interactions to add/remove this class when the modal opens/closes.
- In your custom CSS (via an Embed element in the page's
<head>or inside a page section), add this CSS rule:.modal-open { overflow: hidden; } - This prevents the background content (usually the body) from being scrollable.
2. Make the Modal Scrollable
- Ensure your modal container (the background overlay) has fixed positioning, e.g.,
position: fixed; top: 0; left: 0; right: 0; bottom: 0;. - Inside the modal container, place another div that acts as the modal content wrapper.
- Set the modal content wrapper's max-height to a percentage of the viewport (e.g.,
90vh) and set overflow: auto or overflow-y: auto so it can scroll when needed. - Make sure padding is applied as needed within the scrollable wrapper to avoid content being too close to the edge.
3. Disable Touch Scroll on Body (Optional)
- On mobile devices, body scroll can "bleed through." If needed, you can add
touch-action: none;and-webkit-overflow-scrolling: auto;to themodal-openbody class to reinforce the block.
4. Check Z-Index and Positioning
- Ensure the modal overlay is above other elements with a high z-index (e.g., 9999).
- The background content should be unaffected visually, but scroll should be locked when modal is active.
Summary
To create a scrollable modal on small screens without scrolling the background, lock the body scroll using a class like modal-open, and enable scrolling inside the modal by setting a proper max-height and overflow: auto. This ensures good usability while maintaining focus on the modal content.