scroll-snap

CSS Scroll Snap — привязка прокрутки к определённым точкам (как в карусели).

Зачем нужно

Создаёт карусели и полноэкранные слайдеры на чистом CSS без JavaScript. Скролл «прилипает» к элементам.

Где используется

  • Горизонтальные карусели товаров
  • Полноэкранные секции (fullpage scroll)
  • Галереи изображений

Code example

/* Горизонтальная карусель */
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
}
.carousel__slide {
  flex: 0 0 80%;
  scroll-snap-align: center;
}

/* Полноэкранные секции */
.fullpage {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.fullpage__section {
  height: 100vh;
  scroll-snap-align: start;
}

/* proximity — мягкая привязка */
.gallery {
  scroll-snap-type: x proximity;
}

/* Отступ от края */
.container {
  scroll-padding: 20px;
  scroll-snap-type: x mandatory;
}

/* Остановка скролла */
.slide {
  scroll-snap-stop: always; /* не пропускать слайды */
}

Связанные темы

Ресурсы