snippetcssModeratepending

CSS scroll-snap -- native carousel without JavaScript

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

scroll-snapcarouselscroll containermandatoryproximity

browser

Problem

Building carousels and paginated scroll containers requires JavaScript for snap behavior, momentum, and positioning. Libraries add bundle weight.

Solution

CSS scroll-snap provides native snapping with smooth scrolling, momentum physics, and no JavaScript needed.

Code Snippets

CSS scroll-snap carousel and page sections

/* Horizontal carousel */
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.carousel::-webkit-scrollbar { display: none; }

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

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

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

/* Proximity: only snap when close */
.gallery {
  scroll-snap-type: x proximity;
}

Revisions (0)

No revisions yet.