How can I make my Webflow modal scrollable on small screens without affecting the scrollability of the content behind it?
TL;DR
- Set the modal overlay to fixed position with full-screen coverage and a high z-index.
- Limit modal content height (e.g., 80vh) and set overflow to auto for internal scrolling.
- Disable body scrolling with JavaScript when the modal opens and re-enable it when closed.
- Ensure touch devices allow smooth scrolling by using
overflow-y: autoand-webkit-overflow-scrolling: touch.
To make a modal in Webflow scrollable on small screens without allowing the background content to scroll, you need to properly configure the modal wrapper and prevent body scrolling.
1. Set Up Modal Positioning
- Select your modal overlay (the background div that covers the whole viewport).
- Set its position to Fixed, full screen (Top: 0, Bottom: 0, Left: 0, Right: 0).
- Set a high z-index (e.g., 9999) to ensure it’s above the rest of your content.
2. Enable Scrolling Within the Modal Content
- Select the modal content container (the inner box that holds your modal content).
- Set a max-height (e.g.,
80vh) to limit its height on small screens. - Set overflow to Auto or Scroll so that the content inside becomes scrollable when it exceeds the max height.
3. Prevent Background Scrolling
- Create a custom interaction that disables body scrolling when the modal opens:
- Go to Interactions > Page Trigger > Page Load, or attach it to a modal open button.
- Add a custom code embed or use Webflow’s built-in "Run JavaScript" action with this:
document.body.style.overflow = 'hidden';when modal opens.document.body.style.overflow = 'auto';when modal closes.
4. Avoid Scroll Conflicts on Touch Devices
- On the modal’s scrollable content container, ensure:
- overflow-y: auto
- Webkit overflow scrolling is enabled (Webflow sets this automatically in most cases unless customized)
- You can optionally set
-webkit-overflow-scrolling: touchvia custom CSS in an Embed for smoother touch scrolling.
5. Test on Different Viewports
- Use Webflow’s preview or your own browser tools to simulate small screens.
- Ensure background content cannot scroll and that modal content scrolls only if it exceeds the viewport.
Summary
To create a scrollable modal in Webflow on small screens: set a max-height and overflow on the modal content, fix the modal overlay, and disable body scrolling when the modal is open. This ensures a clean, scrollable modal without affecting background scroll.