How Does Scroll Snap Work?

Understanding scroll snapping in CSS.

What You'll Learn

Container properties
Item properties
Common patterns

Container Properties

styles.cssCSS

.container {
  scroll-snap-type: x mandatory; /* Horizontal */
  scroll-snap-type: y proximity; /* Vertical */
  overflow-x: auto;
}

Item Properties

styles.cssCSS

.item {
  scroll-snap-align: start;
  scroll-snap-align: center;
  scroll-snap-align: end;
}

Carousel Example

styles.cssCSS

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

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

Full Page Sections

styles.cssCSS

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

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

How Does user-select Work?

How Does writing-mode Work?