Scroll Snap

Snap points, horizontal scrolling, carousel patterns, and smooth scrolling.

Overview

Scroll snap creates smooth, controlled scrolling experiences.

Key Concepts

• scroll-snap-type — Container snap behavior
• scroll-snap-align — Child snap points
• scroll-padding — Container padding for snap
• scroll-margin — Element margin for snap
• smooth scrolling — CSS and JS scrolling

Code Examples

/* Horizontal scroll snap */
.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 1rem;
}

.horizontal-scroll > * {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

/* Vertical scroll snap */
.vertical-scroll {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.vertical-scroll > * {
  height: 100vh;
  scroll-snap-align: start;
}

/* Carousel */
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* Snap padding */
.scroll-container {
  scroll-padding: 100px 0;
}

.scroll-item {
  scroll-margin: 20px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Scroll to element */
.section {
  scroll-margin-top: 80px; /* Account for fixed header */
}

/* Full-page sections */
.fullpage {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image gallery */
.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0.5rem;
}

.gallery img {
  flex: 0 0 auto;
  height: 300px;
  scroll-snap-align: center;
}

/* Tab panels */
.tabs {
  scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: auto;
}

.tab-panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

Practice

Build a horizontal scrolling carousel with scroll snap.