How can I implement horizontal scroll when scrolling over a div in Webflow?

To enable horizontal scrolling when the user scrolls over a specific div in Webflow, follow these steps:

1. Set Up the Scrollable Section

• Add a div block that will contain the horizontally scrolling content.
• Set its Overflow to Hidden in the Style panel to prevent unwanted scrolling.
• Inside this div, add another div that will contain the content you want to scroll horizontally.
• Set the inner div to Flexbox > Direction: Row and ensure its Width is larger than the parent container to allow scrolling.

2. Apply Custom Scroll Interaction

• Go to Interactions (lightning icon) in the Webflow panel.
• Create a new page trigger and select “While scrolling in view”.
• Choose the target div that should trigger the horizontal scroll.

3. Use Webflow’s Transform to Move Content

• Add an “Element Move” animation inside the interaction.
• Set the X-axis movement so that the content shifts horizontally while scrolling.
• Adjust the Scroll Progress to control how far the element moves based on scroll position.

4. Add Custom Code (Optional for Smooth Scroll)

If you want a smoother scroll effect, you can add custom JavaScript:

1. Go to the Page Settings and paste this inside the Footer Code section:

   ```

   ```

2. Make sure your outer div has the correct class (.scroll-container in this example).

5. Publish and Test

• Publish your site and test the scroll behavior.
• Adjust animation settings if needed to improve fluidity.

Summary

To enable horizontal scrolling over a div in Webflow, use flexbox for layout, apply scroll interactions, and optionally add JavaScript for event manipulation. This creates a smooth experience where users can scroll horizontally using the mouse wheel.