Горизонтальная прокрутка карточек

Хороший пример реализации горизонтальной прокрутки карточек с использованием CSS:

Horizontal scrolling

Он позволяет прокручивать карточки с фиксацией по самой карточке.

Код

<div class="list">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
</div>

.list {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.list > * {
  scroll-snap-align: start;
}