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?

To enable smooth scrolling with section locking on click using horizontal scroll in Webflow, follow these steps to create a seamless navigation experience for a menu (like a pizza category slider).

1. Structure Your Horizontal Scroll Layout

• Use a Section element as the horizontal scroll container.
• Inside it, place a Div Block named something like "Scroll Track" and set it to flex: horizontal (display: flex, direction: horizontal).
• Add multiple child divs for each category (e.g., Pizza, Calzones, Salads). Set each to 100vw width to occupy full viewport width.
• Give each category section a unique ID for anchor linking (e.g., #pizza, #calzones, etc.).

2. Enable Horizontal Overflow and Scrolling

• Set the outer Section wrapper to overflow: hidden.
• On the "Scroll Track" div:
• Set overflow-x: scroll
• Set white-space: nowrap
• Optional: set scroll-snap-type: x mandatory for scroll locking support.

3. Apply Scroll Snap to Each Category Section

• On the category section divs (inside the Scroll Track), add:
• scroll-snap-align: start
• Optional: min-width: 100vw to ensure staging stays aligned

These let the scroll lock to each section automatically when scrolling manually.

4. Create Anchor Links for Each Menu Button

• For each menu button (e.g., in a navbar or side menu), use a Link Block or Button.
• Set each link’s Link Settings to target a section ID — for example:
• Link to #pizza
• Link to #calzones
• Link to #salads

Webflow doesn’t natively support smooth horizontal scroll with anchor links, so we add custom code next.

5. Add Smooth Horizontal Scroll Custom Code

• Go to Page Settings > Before tag and add this script:

<script>  document.querySelectorAll('a[href^="#"]').forEach(link => {    link.addEventListener('click', function(e) {      e.preventDefault();      const target = document.querySelector(this.getAttribute('href'));      if (target) {        target.scrollIntoView({ behavior: 'smooth', inline: 'start', block: 'nearest' });      }    });  });</script>

• This enables smooth horizontal scroll and alignment to start of each section when clicking a menu item.

6. Optional: Disable Vertical Scroll on Wrapper

• If needed, set the main scroll container (Section) and body to have overflow-y: hidden to avoid accidental vertical scroll.

Summary

Create a horizontal scroll layout with category sections using flex layout, apply scroll snapping, and link each category using IDs. Then, add JS to support smooth scrolling to horizontal sections on click. This creates a clean, locked scrolling experience for your pizza shop’s menu in Webflow.