Вёрстка сайтов | HTML, CSS, JS on Telegram: “CSS Scroll Snap: перелистывание без JS Когда нуж…”

CSS Scroll Snap: перелистывание без JS

Когда нужно сделать горизонтальную галерею или вертикальный список, где элементы "прилипают" при скролле, часто берут слайдеры на JS. Но это можно сделать только на CSS — через scroll-snap.

Как работает:
1. Родителю задаём тип прилипания:

.container {
  scroll-snap-type: x mandatory; /* по оси X, обязательно прилипать */
  overflow-x: auto;
  display: flex;
}

x | y | both — по какой оси снэпится.
mandatory | proximity — обязательно прилипать или "по желанию".

2. Дочерним элементам указываем точку прилипания:

.card {
  scroll-snap-align: start; /* точка начала */
  flex: 0 0 100%;
}

Варианты:
- start — прилипает к началу контейнера.
- center — выравнивается по центру.
- end — по концу.
Пример

<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

Теперь при свайпе карточки будут "листаться" одна за другой, как слайдер.

Плюсы
Работает нативно, без JS.
Плавный UX на мобильных устройствах.
Поддержка во всех современных браузерах.

Можно собрать галерею, карусель или даже PDF-подобное перелистывание с минимальным кодом.

#css | #полезности