How can I create a section on my website in Webflow that enables horizontal scrolling only when the user hovers over the section or swipes on it in mobile, while still allowing vertical scrolling to bypass the section if desired?

You want to create a horizontal scrolling section on hover or swipe, while still allowing vertical scroll to bypass it. This effect combines flexbox scrolling with overflow control and interaction tuning.

1. Build the Section Structure

• Wrap your content in a Section (or Div Block) that serves as the horizontal scroll container.
• Inside that, place another Div Block (call it something like Scroll Track) with display: flex and direction: horizontal.
• Add any number of child divs or content blocks inside the scroll track—they’ll lay out side-by-side.

2. Set Scroll Direction and Hide Overflow

• Select the Scroll Track container and apply these styles:
• Overflow: auto (horizontal only) → set Overflow-X: scroll, Overflow-Y: hidden
• White Space: nowrap (if you're not using Flex)
• Optional: Add smooth scrolling behavior under scroll settings → Scroll Behavior: smooth

3. Limit Scroll to On-Hover or Swipe Only

• Select the outer Section and set:
• Pointer Events: none for desktops so scroll doesn’t activate unless hovered
• For mobile, you can't use hover, but naturally swiping left/right on the horizontal track will activate scroll.
• Set Pointer Events to auto on hover: Use a Webflow interaction:
• Trigger: Mouse Hover (Hover In/Out)
• Action: On hover-in, set Child's pointer-events to auto
• On hover-out, set pointer-events to none

4. Allow Vertical Scroll Bypass

• Set the horizontal scroll section’s height short enough (e.g., 300px) so users can see there’s more below.
• Ensure outer wrapper or the body still has Overflow-Y: scroll
• This allows users to simply scroll down past the section unless they intentionally hover or tap-swipe on it.

5. Enable Mobile Swipe Behavior

• On mobile, Webflow does not support custom swipe logic natively.
• The native horizontal scroll behavior will work with overflow-x set to "scroll"—users can drag sideways to scroll it.
• Disable any vertical overflow: hidden that would block mobile scroll.

Summary

To create a horizontal scroll section triggered by hover or swipe:

• Use a flex-based scroll track with overflow-x: scroll.
• Set pointer events to auto on hover using Webflow interactions.
• Limit the section height to allow users to bypass it with standard vertical scroll.
• On mobile, the section will accept native side-swipes for horizontal scroll without blocking vertical flow.