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 (desktop) or swipe (mobile) while still allowing vertical scrolling to bypass it, follow these steps:

1. Set Up the Section Structure

• Add a Section to your page and give it a class name (e.g., horizontal-scroll-wrapper).
• Inside that section, place a div called scroll-container that will hold horizontally scrollable content.
• Inside scroll-container, add as many item divs or content blocks (e.g., cards or images) as needed.

2. Style the Scroll Container

• Set scroll-container to:
• Display: flex
• Flex Direction: row
• Overflow-X: scroll
• Overflow-Y: hidden
• Scroll Snap Type: x mandatory (optional for snapping)
• White Space: nowrap (optional if using images or cards)
• Disable horizontal scrollbar visibility with custom CSS class if desired (via Embed or page-level CSS).

3. Ensure Vertical Scrolling Works Outside the Hover/Swipe Zone

• Make sure your horizontal scroll section doesn't occupy 100vh in height unless needed.
• Set fixed height (e.g., 300px) for the horizontal-scroll-wrapper so vertical scroll can continue past it.

4. Optional: Add Hover-to-Scroll Effect on Desktop

• Webflow doesn't support native horizontal scroll on hover, but you can simulate it with interactions or custom code.
• Alternatively, let users scroll manually on desktop via horizontal scroll gestures (trackpad or mouse wheel with shift key).
• You can use custom JavaScript to translate vertical scroll to horizontal scroll only when hovering (see below for outline only; no raw code per instructions).

5. Enable Swipe on Mobile

• On mobile, horizontal scrolling via swipe will work natively if:
• Overflow-X: scroll is applied on scroll-container
• Content items are wider than the container

6. Prevent Scroll Blocking

• Do not set overflow:hidden on the horizontal-scroll-wrapper or the body.
• The horizontal scroll zone should allow vertical scroll when not actively being swiped/horizontal scrolled.

7. Optional: Add Touch-Friendly Styling

• Increase padding or spacing between items to make swipe interactions smoother
• Use scroll snap for better swipe feel: set each child item with scroll-snap-align: start

Summary

Create a horizontally scrollable div inside a vertically scrollable page section by using flex row, overflow-x: scroll, and a fixed height container. This enables horizontal swiping on mobile and simulates hover-based scrolling on desktop while preserving overall vertical page navigation.