50. CSS Scroll Snap

CSS Scroll Snap

Иллюстрация к уроку

CSS Scroll Snap — это нативный браузерный механизм, который заставляет прокрутку «прилипать» к определённым точкам, создавая плавные слайдеры, галереи и постраничную прокрутку без единой строки JavaScript.

До Scroll Snap разработчики писали сложные JS-обработчики для snap-эффекта. Теперь это 2 строки CSS.

Как это работает: контейнер + дочерние элементы

Scroll Snap настраивается на двух уровнях:

1. Контейнер — элемент, который прокручивается. На него устанавливается тип снапа:

.slider {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

2. Дочерние элементы — точки притяжения. На них задаётся выравнивание:

.slide {
  scroll-snap-align: start; /* start | center | end */
}

scroll-snap-type

/* Ось: x | y | both */
/* Строгость: mandatory | proximity */

scroll-snap-type: x mandatory;   /* горизонтальный слайдер, жёсткий снап */
scroll-snap-type: y mandatory;   /* вертикальный, как TikTok */
scroll-snap-type: y proximity;   /* притягивает только если близко */

Значение	Поведение
`mandatory`	Прокрутка всегда останавливается на snap-точке
`proximity`	Притягивает, только если позиция близко к точке

scroll-snap-align

.item {
  scroll-snap-align: start;   /* левый/верхний край */
  scroll-snap-align: center;  /* центр — для карточек */
  scroll-snap-align: end;     /* правый/нижний край */
}

scroll-snap-stop

По умолчанию при быстром свайпе прокрутка может пролетать через несколько элементов. scroll-snap-stop: always останавливает на каждом:

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always; /* обязательная остановка */
}

scroll-padding и scroll-margin

Если у тебя есть фиксированный хедер, контент может скрываться за ним. scroll-padding задаёт отступ внутри контейнера:

.container {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 60px; /* хедер 60px */
}

scroll-margin — отступ на конкретном элементе (аналог margin, но для снапа):

.section {
  scroll-snap-align: start;
  scroll-margin-top: 60px;
}