Scroll Snap

CSS Scroll Snap lets you control where a scroll container lands after the user finishes scrolling. Instead of stopping at an arbitrary position, the container snaps to predefined points, creating a polished, app-like experience.

Two properties work together:

On the scroll container:

.scroller {
  scroll-snap-type: x mandatory;
}

• The first value (x, y, or both) sets the scroll axis.
• The second value controls snap strictness:
  • mandatory — The browser must snap to a snap point after scrolling. The user cannot rest between snap points.
  • proximity — The browser only snaps if the scroll position is near a snap point. Allows free scrolling otherwise.

On each child item:

.slide {
  scroll-snap-align: start;
}

Values: start, center, end, or none. This determines which edge of the item aligns with the container's snap port.

The scroll-padding property adds an offset to the snap point, which is useful when you have a fixed header or want visual breathing room:

.scroller {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 80px; /* accounts for a fixed header */
}

Vertical full-page sections are another popular scroll snap pattern:

.page-scroller {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

Each section takes the full viewport height, and scroll snap ensures the user always lands perfectly on a section boundary.

Best practices:

• Use mandatory for carousels and full-page sections where partial views look broken.
• Use proximity for long content where the user may need to scroll freely.
• Always ensure the snapped content is accessible via keyboard navigation.
• Test scroll snap behavior on both touch and mouse-based devices.