How can I make a section scroll horizontally while scrolling vertically in Webflow?

To create a horizontal scrolling section within vertical scroll in Webflow, you’ll need to use a combination of interaction triggers and overflow settings. Here's how to do it:

​

1. Prepare the Section and Content

​

• Add a Section to your page and give it a class (e.g., horizontal-scroll-section).
• Place a Div inside the section and name it something like scroll-container.
• Inside scroll-container, add another Div called scroll-track to hold the contents you want to scroll horizontally (e.g., multiple columns or cards).
• Set child elements (inside scroll-track) to display side by side using flex layout (horizontal).

​

2. Set CSS Overflow and Sizing

​

• Set scroll-container:
• Overflow: Hidden
• Position: Sticky, Top: 0
• Height: 100vh

​

• Set scroll-track:
• Make the width = 100vw × number of child content blocks.
• Example: If you have 5 horizontal panels, set width to 500vw.
• Use flex: horizontal layout to spread child blocks left to right.

​

3. Create Vertical “Scroll Space”

​

• Add a dummy div below the sticky section called scroll-spacer.
• Set its height equal to the horizontal scroll width (e.g., 500vw = 500% of viewport width).
• This dummy space allows the user to scroll down, which will simulate horizontal movement using interactions.

​

4. Use Webflow Interactions

​

• Go to Interactions Panel > Page Trigger > While page is scrolling (scroll progress).
• Set the animation to affect the scroll-track element.
• Create an animation with:
• Initial State: moveX: 0%
• Final State: moveX: -400% (if 5 sections)
• This shifts the content horizontally as you vertically scroll.

​

5. Match Scroll Movement with Animation

​

• Resize the scroll-spacer div to adjust scroll distance.
• Fine-tune the scroll range in the interaction timeline to control how quickly the horizontal scroll occurs.

​

Summary

​

To simulate horizontal scrolling inside vertical scroll in Webflow:

1. Build a sticky section with hidden overflow.
2. Expand child content horizontally using flex and vw widths.
3. Use a tall dummy div to create vertical scroll space.
4. Animate horizontal movement with a scroll-trigger page interaction.

​

This approach uses native Webflow tools—no custom code needed.