How can I implement horizontal scroll when scrolling over a div in Webflow?
TL;DR
- Structure divs with a relative parent and a horizontal flex container sized in multiples of 100vw.
- Use Webflow’s Scroll In View interaction to animate the X-axis of the content based on vertical scroll.
- Set the wrapper height to 100vh × number of items and hide body overflow-x to prevent horizontal scrollbars.
To create a horizontal scroll effect on a div when the user vertically scrolls, you can use Webflow’s native interactions along with custom structure and overflow settings.
1. Structure the Layout
- Create a parent div (e.g.,
scroll-section-wrapper) and set its position to relative. - Inside this, create a section (e.g.,
horizontal-scroll-container) that will contain all the horizontally scrolling content. - Add all your horizontal content items in a flex row layout.
2. Apply Styling to Enable Side Scroll
- Set the
horizontal-scroll-containerto: - Display: flex
- Flex direction: row
- Overflow: visible
- Position: absolute or fixed, depending on the setup
- Width: A multiple of 100vw depending on the number of items (e.g., 400vw for 4 items)
- Make sure
scroll-section-wrapperhas position: relative and a specified height that’s long enough to scroll.
3. Use Interactions to Trigger Horizontal Movement
- Select scroll-section-wrapper, go to Interactions panel.
- Create a new Scroll Animation and set it to trigger While scrolling in view.
- Define a new timeline animation.
- On first keyframe (0%), set the X-axis of horizontal-scroll-container to 0%.
- On the last keyframe (100%), set the X-axis to -300% (if you have 4 content sections), moving the content left as user scrolls down.
- Adjust easing as necessary for smoother motion.
4. Adjust Section Height
- The height of
scroll-section-wrapperdetermines how much room the user has to scroll vertically. - Generally, set it to 100vh × number of items (e.g., 400vh for 4 items) to align 1 vertical scroll = 1 horizontal panel.
5. Prevent Native Horizontal Scroll
- Webflow already disables horizontal scroll on the body. If needed, ensure the Body and HTML elements have
overflow-x: hiddento stop any unintended horizontal scrollbars.
Summary
To implement horizontal scroll on vertical mouse scroll in Webflow:
- Structure your divs using a parent wrapper and horizontal flex content.
- Animate the X-position of the content in response to vertical scroll using Scroll In View interaction.
- Match the section height to allow enough scroll room for smooth horizontal motion.