CSS Scroll Snap for Overflow Elements

Basic Implementation

The standard overflow approach works quite roughly on mobile devices — the user can just scroll and stop at any random position, which doesn’t feel native.

Native-feeling Implementation

For horizontal scrolling elements, use these key properties:

.tabs__list {

  overflow-x: auto;

  scroll-snap-type: x mandatory;

}



.tabs__link {

  scroll-snap-align: start;

}

How It Works

• scroll-snap-type: x mandatory - Forces the scroll container to snap to defined points along the x-axis

• scroll-snap-align: start - Each tab will snap to align with the start of the scroll container

This creates a smooth scrolling experience where users can swipe through tabs, and the scroll will automatically snap to the beginning of each tab item.

Mobile-First Approach: Touch Scrolling

For better native mobile behavior, especially on iOS and Android devices, add momentum scrolling:

.tabs__list {

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS */

}

The -webkit-overflow-scrolling: touch property enables native momentum scrolling on iOS devices, making the horizontal scroll feel more natural and responsive to touch gestures. This creates the smooth, bouncy scroll behavior users expect from native mobile apps.

Controlling Initial Scroll Position

By default, scroll snapping starts from the very beginning of the container. If you need the scroll to start with some offset (for example, to account for padding or spacing), use:

.tabs__list {

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scroll-padding-inline: 20px; /* Adds 20px offset from start/end */

}

The scroll-padding-inline property creates an offset zone, so the first tab won't snap directly to the edge but will maintain the specified distance from the container's start.

Complete Example

Here's a complete implementation:

.tabs__list {

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  gap: 2rem;

}



.tabs__link {

  scroll-snap-align: start;

  white-space: nowrap;

  padding: 0.75rem 1rem;

}

Benefits

• Improved UX: Smooth, predictable scrolling behavior

• Touch-friendly: Works great on mobile devices with swipe gestures

• Native feel: Momentum scrolling makes it feel like native mobile navigation

• Accessibility: Maintains keyboard navigation while enhancing scroll behavior

• No JavaScript required: Pure CSS solution

• Cross-platform consistency: Works uniformly across different devices and browsers

Browser Support

CSS Scroll Snap has excellent modern browser support. The -webkit-overflow-scrolling: touch property is specifically for iOS Safari and older WebKit browsers, ensuring backward compatibility for mobile devices.