How do I enable scrolling within a popup in Webflow using the mouse wheel or trackball on devices without touchscreens or trackpads?

To enable scrolling within a popup in Webflow using the mouse wheel or trackball, you need to make sure the popup’s content is scrollable and that no parent elements block this behavior.

​

1. Set Popup Content to Scrollable

​

• Select the popup container (the scrollable part inside the popup, not the background or overlay).
• In the Style panel, set:
• Height: Use a fixed height (e.g., 500px) or limit it with max-height if it depends on viewport size.
• Overflow: Set to Auto or Scroll. This enables scrollbars when content overflows.

​

2. Ensure the Scrollable Container Has Focus (Optional)

​

• Browsers often allow mouse wheel scrolling on any scrollable element under the pointer.
• If scrolling doesn’t work, try adding a Tabindex of 0 to the scrollable container. This can help it receive focus when clicked:
• Select the scrollable div.
• Go to the Element Settings panel.
• Set Tabindex to 0.

​

3. Prevent Body Locking All Scroll (If Body is Disabled)

​

• If your popup trigger uses interactions to disable body scroll (a common practice), make sure you’re not globally disabling scroll.
• Check if the overflow: hidden is applied to the body or html and remove or limit it when the popup is open.

​

4. Avoid Nested Overflow Issues

​

• Ensure no parent element of the scrollable popup content has overflow: hidden, which can block inner scroll.
• Keep parent containers set to overflow: visible or unset, unless absolutely needed.

​

5. Test with Mouse Wheel or Trackball

​

• To confirm, preview your site.
• Open the popup with lots of overflow content.
• Hover your mouse over the scrollable area and use the mouse wheel to scroll.

​

Summary

​

Make sure the popup content has a fixed height and overflow: auto, that no parent containers block scrolling, and optionally add tabindex=0. This enables proper mouse wheel or trackball scrolling on non-touch devices.