Как сделать горизонтальную ленту карточек без сложной анимации
Если карточки нужно листать пальцем или колёсиком по горизонтали, начните с обычного прокручиваемого контейнера и scroll-snap. Он легче, доступнее и устойчивее привязанной к скроллу анимации. Липкая секция, где вертикальный путь двигает длинную ленту, — уже другой сценарий и отдельная модификация. Не смешивайте их: визуально похожи, но ломаются по-разному.
Короткий ответ
Для карусели на телефоне используйте нативный горизонтальный скролл. Для презентационной сцены с закреплённым экраном — MOD-178 и отдельная проверка sticky.
Простая лента
Обёртка должна ограничивать ширину, а внутренняя дорожка — держать карточки в строку. Базовая идея выглядит так:
.cards {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-inline: contain;
}
.card {
flex: 0 0 min(82vw, 360px);
scroll-snap-align: start;
}В Zero Block такой контейнер лучше собирать как одну размеченную группу. Не
назначайте overflow: hidden всем родителям подряд: он может обрезать тени и
отменить поведение липкого потомка.
Стрелки
Стрелка должна прокручивать на ширину фактической карточки с промежутком, а не на фиксированные 300 пикселей из макета. После смены ширины измерение меняется. Кнопки скрывают или блокируют на начале и конце, но свайп оставляют.
Когда нужен sticky
Если левая часть остаётся на месте, а правая лента проходит длинный путь при
вертикальном скролле, это не карусель. Секция должна получить дополнительную
высоту, закрепиться и переводить вертикальный прогресс в translateX.
MOD-178 описывает эту механику и её ограничения.
Приёмка на клиентском сайте
Проверьте настоящим пальцем, трекпадом, Shift+колесо и клавиатурой. Карточка не должна застревать между позициями, а вертикальная страница — случайно уезжать вбок. После проверки удалите системную полосу прокрутки только если остаётся другая заметная подсказка.