How do I enable scrolling within a popup in Webflow using the mouse wheel or trackball on devices without touchscreens or trackpads?
TL;DR
- Set a fixed or percentage height (e.g., 80vh) and overflow: auto on the popup’s scrollable container.
- Prevent background scrolling by setting body overflow to hidden when the popup opens and back to auto on close.
- Ensure no parent elements have overflow: hidden or custom scroll interactions that block scrolling within the popup.
To allow mouse wheel or trackball scrolling inside a popup in Webflow, you need to ensure the popup’s inner content is scrollable independently from the page.
1. Set Popup Content Height and Overflow
- Select the scrollable container inside your popup (usually this wraps your content).
- In the Style panel, make sure:
- Height is set to a percentage or fixed (e.g.,
80vh,500px) so there's space to scroll within. - Overflow is set to Auto or Scroll. This enables the internal scroll:
- Set Overflow: Auto for both Vertical and Horizontal (but usually just vertical is fine).
2. Prevent Background Page from Scrolling
- While the popup is open, prevent background scrolling so the wheel input stays focused on the popup.
- You can do this by:
- Setting
overflow: hiddenon the Body when the popup is triggered. - Example: Create an interaction that targets the Body and sets overflow to hidden on open, and back to auto on close.
3. Avoid Scroll Hijacking Interactions
- If your site uses custom scroll behavior (e.g.,
overflow: hiddenon the entire page with scroll interactions), they might block popup scrolling. - Ensure such interactions temporarily disable while popup is open, or that the scrollable div still accepts wheel events.
4. Use Native Scroll Behavior
- Webflow doesn’t restrict mouse wheel or trackball inputs unless a parent div has overflow hidden or other scroll disruptors.
- Make sure none of the outer wrappers or modals have overflow: hidden unless needed for layout.
5. Test on a Non-Touch Device
- Test your popup on a device using a:
- Mouse with scroll wheel
- Trackball mouse
- Hold the cursor over the scrollable region of the popup—scroll should work as expected if the overflow behavior and heights are set correctly.
Summary
To enable mouse or trackball scrolling in a Webflow popup, set the scrollable container’s height and overflow properly, prevent background page scrolling, and avoid interfering scroll interactions on parent elements. Make sure the popup’s content container allows native scroll behavior.