How can I create a step-by-step guide for making a Horizontal Scrolling Website with functional scroll-wheel using Webflow?

TL;DR
  • Create a flex row Horizontal Wrapper with overflow hidden, containing 100vw-wide panels stacked side-by-side and 100vh in height.  
  • Set body height to match total scroll area (e.g., 300vh for 3 panels), and use page scroll interactions to animate the wrapper’s horizontal X movement as the user scrolls vertically.

To create a horizontal scrolling website in Webflow that reacts to the mouse scroll wheel, you can follow these step-by-step instructions using native Webflow interactions and layout settings.

​

---

​

1. Set Up Site Structure and Sections

​

  • Create a new page or use your existing page.
  • Add a parent div block and name it something like “Horizontal Wrapper”.
  • Set this wrapper’s display to flex (horizontal) and overflow to hidden.
  • Inside the wrapper, add sections or div blocks for each horizontal content panel.

​

Example:

  • Horizontal Wrapper
  • Panel 1 (Set width: 100vw)
  • Panel 2 (Set width: 100vw)
  • Panel 3 (Set width: 100vw)

​

Each panel should have height: 100vh to fill the screen vertically.

​

---

​

2. Set Layout for Horizontal Scrolling

​

  • Select the Horizontal Wrapper.
  • Set Display: Flex, Direction: Row.
  • Ensure Overflow: Hidden on the parent to prevent normal vertical scrolling.
  • Give each panel width: 100vw, so they line up side-by-side.

​

---

​

3. Apply Scroll Wheel Interactions

​

Webflow doesn’t directly convert mouse wheel to horizontal scroll, but you can achieve this with a Page load scroll interaction + horizontal scrolling using Webflow interactions.

​

To do this:

​

  • Set the body height to match the total length of your horizontal content. For example, if you have 3 horizontal panels, set body height to 300vh.
  • Set the position of the Horizontal Wrapper to sticky or fixed (depending on your approach) and limit the vertical area it occupies.
  • Configure a Page Scroll Interaction:
  • Go to Page Trigger > While Page is Scrolling.
  • Set a horizontal transform (move) on the Horizontal Wrapper.
  • As the page scrolls (vertically), animate horizontal movement of the panels to the left.
  • For instance:
  • Scroll % 0 → Move X: 0%
  • Scroll % 100 → Move X: -200% (to shift two full widths left)

​

---

​

4. Turn Off Default Scrolling Scenes

​

To avoid over-scrolling:

  • On the Horizontal Wrapper, use overflow: hidden.
  • Adjust page height carefully to ensure it matches the number of horizontal panels.
  • Optionally, use custom code (outside of Webflow) to prevent rapid scroll if needed, though not strictly necessary.

​

---

​

5. Preview and Publish

​

  • Use Preview Mode to test the scrolling behavior.
  • Verify:
  • Vertical scroll converts to horizontal movement.
  • Sections stay within the viewport.
  • Publish your site to see if scrolling works properly on live device browsers.

​

---

​

Summary

​

To build a horizontal scrolling site with scroll-wheel support in Webflow, lay out panels side-by-side using flex row, simulate horizontal motion with vertical scroll using page scroll interactions, and control layout with fixed or sticky positioning. Horizontal movement is animated by translating the wrapper on X-axis relative to scroll position.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why does the old design of my client's website appear broken for some visitors?
When will Webflow remove the 100 static page limit and provide a timeline for implementation?
Is there a built-in feature in Webflow for setting up ticket sales on a client's site for their events, or would I need to use a third-party tool like Eventbrite?
How can I integrate Stripe Checkout on a Webflow site for a simple click payment option? Could you recommend any other checkout options similar to Stripe for a single item purchase?
How can I replace images in a Webflow template that are labeled "for illustration purposes only" instead of deleting them?
Is there an easy solution in Webflow for creating a slider element with a bar on the left that changes the content on the right when slid?
How can I ensure that a Lottie animation remains in place on a webpage while the content beneath it scrolls and only ends after a certain duration or number of pixels, without constantly adjusting the timing in Webflow's scroll effects?
Is there a way to add custom code in Webflow to fix the issue of a play button appearing on the screen instead of autoplay for a background video in Safari and low power mode?
Is it normal for long words in a big heading on Webflow to overflow out of view instead of wrapping to the next line?
How can I create advanced filtering functions in Webflow to filter content by multiple options such as type, size, color, etc?
Is there a way to prevent sound from continuing to play after exiting a video in a Webflow portfolio with Lightbox? If so, what code should I use and where should I place it? Thank you!
How can I make an embedded video in Webflow loop once it finishes? Can I remove the video controls on hover?
Is the issue of collection items appearing and disappearing during filtering with finsweets CMS Load a bug or a misconfiguration in Webflow?
Why does the Webflow hosting platform experience downtime and performance issues, and why does their official status page not accurately reflect these issues? Is it normal for a major hosting provider like Webflow to have these problems?
Can I create vertical tabs in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?