How can I create a smooth scroll and lock to section on click with a horizontal scroll in Webflow for a pizza shop's category menu on a client site in Brooklyn?

TL;DR

Create a horizontal flex scroll container with sections set to 100vw width and overflow-x enabled.
Assign unique IDs to each section and use smooth scroll CSS in the <head>.
Build a navigation menu with click-triggered interactions that scroll to the corresponding section smoothly.
Disable vertical scroll via body overflow settings to maintain horizontal-only scrolling.

You're looking to implement smooth horizontal scrolling and section locking on click for a category menu in a Webflow project (e.g., for pizza categories). Here’s how to do it using Webflow’s native tools plus small custom interactions.

1. Set Up a Horizontal Scroll Container

Create a parent container (div) that will hold all your category sections (e.g., Margherita, Pepperoni, Vegan).
Set its Layout to Flex > Horizontal (Display: Flex, Direction: Horizontal, Overflow: Hidden, Width: 100vw).
Each section inside should have min-width: 100vw so that one fills the screen at a time.

2. Enable Smooth Scrolling Behavior

Go to the parent container’s style and ensure it's Scroll overflow enabled only in X (horizontal) direction — set Overflow X: Auto, Overflow Y: Hidden.
In Page Settings, add this in the Inside <head> tag section:
<style>html { scroll-behavior: smooth; }</style>

3. Add Unique IDs to Each Section

For each category section (Margherita, Pepperoni, etc.), assign a unique ID (e.g., #margherita, #pepperoni, #vegan).
Do this by selecting the section in the Navigator, then adding an ID under Element Settings.

4. Create the Category Navigation Menu

Create a top or side navigation menu using buttons or links (e.g., "Margherita", "Pepperoni").
Set each link to Link to Section and choose the relevant section ID.

5. Force Menu Clicks to Lock to Section Smoothly

Even with horizontal scroll, normal anchor links may behave inconsistently.
Add a Webflow Interactions trigger to each menu item:
Trigger: Mouse Click (Tap)
Action: Scroll to Element
Target: The corresponding section (use “Scroll Into View” targeting)
Duration: 500–800ms for smooth feel
Easing: Use Ease Out or Ease In Out for better fluidity

6. Prevent Vertical Page Scrolling

To focus the experience on the horizontal flow:
Ensure the Body element has Overflow: Hidden to disable vertical scroll (unless needed elsewhere).
If using a full-page horizontal scroll, wrap all content in a fixed-height container (100vh).

Summary

To implement smooth scrolling and section locking in a horizontally-scrolling pizza category menu:

Use a horizontal flex layout with each section sized to 100vw.
Enable smooth scroll via CSS and Webflow Interactions.
Assign section IDs and make the menu auto-scroll to targets on click.
Use scroll-based interactions instead of anchor links for better performance and control.

Let me know if you need this adapted for nested CMS categories or dynamic content.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer