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

Настройка Scroll Snap состоит из двух частей. На контейнере задаётся scroll-snap-type — ось прокрутки и строгость прилипания (mandatory всегда докручивает до точки, proximity — только если близко). На дочерних элементах указывается scroll-snap-align — какой их край прилипает к контейнеру.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
}

.slide {
  flex: 0 0 80%;
  scroll-snap-align: center;
}

Теперь горизонтальная прокрутка ленты сама центрирует каждый слайд — без единой строки JavaScript. Попробуйте поскроллить эту импровизированную ленту вправо-влево.

1
2
3
4

Поведение можно дошлифовать дополнительными свойствами. scroll-padding на контейнере сдвигает точку прилипания внутрь — полезно, когда сверху есть фиксированная шапка. scroll-snap-stop: always запрещает «проскакивать» несколько слайдов одним резким свайпом, заставляя останавливаться на каждом. Этого набора хватает для большинства каруселей и постраничных лент без скриптов.

CSS Scroll Snap поддерживается во всех современных браузерах: Chrome, Firefox и Safari давно реализовали спецификацию. На 2026 год это полностью стабильная технология для продакшена. В крайне старых браузерах прокрутка останется обычной, без прилипания, что является безопасной деградацией — лента всё равно листается.