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?

To create a horizontal scrolling section in Webflow that activates on hover or swipe, while still allowing vertical scroll to pass through, you'll use a combination of layout styling and overflow control.

1. Build the Section and Content Structure

• Create a Div Block as the wrapper for your horizontal section (e.g., name it horizontal-scroll-wrapper).
• Inside this wrapper, place another Div Block for the scrolling content (e.g., name it horizontal-scroll-content).
• Add multiple content elements (e.g., cards, images, etc.) inside the horizontal-scroll-content div in a horizontal flex layout.

2. Apply Proper Layout Styles

• Select horizontal-scroll-wrapper and apply the following styles:
• Set Width to 100%.
• Set Height to the desired value (e.g., 400px).
• Set Overflow X to auto.
• Set Overflow Y to hidden.
• Optional but helpful: Add Scroll Snap Type to x mandatory.

• Select horizontal-scroll-content:
• Set Display to Flex with Direction: Horizontal.
• Ensure Child Items (content blocks) have a set minimum width to create the horizontal scroll effect.

3. Add Hover-Only Scrollbar Visibility (Desktop)

• Scrollbars typically appear on desktop by default, but to make this cleaner:
• Add a hover state to horizontal-scroll-wrapper.
• Set Overflow X: auto during hover state, and Overflow X: hidden in default state (this hides the scrollbar unless hovered).
• Some browsers may still show a scrollbar; for finer control, use custom scrollbar styling using ::-webkit-scrollbar if exporting code. Webflow does not yet support this natively.

4. Enable Swipe on Mobile

• On mobile, horizontal scrolling is automatically swipe-enabled for elements with overflow-x: auto, so no extra setup is required.
• Just make sure the wrapper has:
• Overflow X: auto
• Overflow Y: hidden
• You can test this by publishing and swipe-right/left on a touchscreen device.

5. Prevent Scroll Hijacking (Allow Vertical Scroll)

• Ensure your horizontal scroll section:
• Does not capture vertical scroll—avoid using pinned interactions like while scrolling in view.
• Avoids sticky or fixed positioning that may trap scroll.
• If using scroll-snap-type, apply it only in the X axis and don't apply vertical snap, which could hijack page scroll.

Summary

Create a horizontal scroll section by using a div with horizontal flex layout inside a wrapper with overflow-x: auto. On desktop, the scroll activates on hover; on mobile, users can swipe naturally. Vertical scrolling is preserved by ensuring no scroll-hijacking interactions or positioning restrict vertical movement.