Как сделать горизонтальную ленту карточек через CSS scroll-snap
CSS scroll-snap выравнивает карточки после прокрутки ленты. Создайте горизонтальную область, задайте точки привязки и проверьте доступ к каждой карточке.
Что должно получиться
Карточки располагаются в одном горизонтальном ряду и прокручиваются внутри своей области. После остановки край карточки может удобно выровняться с началом ленты. Человек видит, что справа есть продолжение, и может добраться до содержимого мышью, касанием и клавиатурой.
Лента не должна превращать страницу в ловушку прокрутки. Вертикальное чтение продолжается обычным способом, фокус остаётся видимым, а последняя карточка доступна полностью. Если для задачи важнее быстро просмотреть много позиций, сравните этот вариант с обычным списком или сеткой.
Из чего это складывается
| Часть | Назначение | Что проверить |
|---|---|---|
| Ряд карточек | Создаёт горизонтальную раскладку | Карточки не сжались в один экран |
| overflow-x | Разрешает внутреннюю прокрутку | Переполнение остаётся внутри ленты |
| scroll-snap-type | Выбирает ось и строгость привязки | Настройка подходит содержимому |
| scroll-snap-align | Задаёт точку выравнивания карточки | Применяется к нужным дочерним элементам |
| Доступный фокус | Позволяет управлять без мыши | Нужная карточка появляется в области |
| Признак продолжения | Помогает обнаружить остальные карточки | Понятен без случайного жеста |
Ось и строгость
Для горизонтальной ленты в обычной экранной раскладке подходит ось x. Значение proximity позволяет браузеру привязать положение, когда оно близко к точке. Точное расстояние определяет реализация браузера, поэтому не ожидайте одинакового движения до последнего пикселя во всех средах.
Mandatory задаёт обязательную привязку. С ним нужно особенно внимательно проверять содержимое, которое крупнее области просмотра: жёсткое выравнивание может мешать добраться до отдельных частей. Для простой ленты начните с proximity и проверьте, нужна ли более строгая логика вообще.
Как это сделать по шагам
- Выберите небольшой набор карточек и решите, почему ему нужна горизонтальная лента. Подготовьте короткие и длинные названия, разные изображения и последнюю позицию.
- Соберите горизонтальный ряд и задайте карточкам размер, при котором содержимое действительно выходит за ширину области.
- Разрешите прокрутку через overflow-x: auto. Проверьте обычное движение до добавления привязки.
- Назначьте контейнеру scroll-snap-type: x proximity, а карточкам — подходящее scroll-snap-align.
- Сохраните понятный признак продолжения и доступ к ленте с клавиатуры. Не полагайтесь только на жест перетаскивания.
- Проверьте медленную и быструю прокрутку, переход фокуса между карточками, начало и конец ряда.
- Повторите проверку с увеличенным текстом и узкой областью. Убедитесь, что все сведения и действия остаются достижимыми.
Пример CSS
Учебная лента имеет класс rail, её карточки — card. Правила: .rail { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity; } .rail > .card { flex: 0 0 80%; max-width: 18rem; scroll-snap-align: start; }
Здесь карточки не сжимаются, а их базовая ширина связана с областью ленты и ограничена сверху. Числа показывают устройство примера, а не обязательные размеры. Подберите ширину по содержимому. Если каждая карточка занимает весь экран и ничто не указывает на продолжение, человек может не заметить остальные позиции.
Привязка не создаёт переполнение сама. Если все карточки уже помещаются в контейнере, прокручивать нечего. Сначала проверьте размеры и раскладку, затем точки выравнивания. Иначе легко искать ошибку в scroll-snap, когда причина находится в сжатии элементов.
Управление с клавиатуры
Возможность сфокусировать прокручиваемую область зависит от среды. При необходимости сделайте контейнер доступным для фокуса через tabindex='0', добавьте подходящую роль и доступное имя, описывающее содержимое. Проверьте, что дополнительная точка фокуса помогает пользоваться лентой, а не создаёт непонятную остановку.
Если внутри есть ссылки и действия, переходите между ними обычным способом и наблюдайте, появляется ли активный элемент в области. Обводка фокуса не должна обрезаться краем. После последнего действия человек должен продолжить движение по странице без зацикливания.
Частые ошибки
Скрывать полосу и все признаки продолжения
Визуально аккуратная лента может выглядеть законченной после первой карточки. Оставьте понятную подсказку существования других позиций: видимую часть соседней карточки или другое доступное обозначение. Проверьте это на человеке, который не знает устройство блока заранее.
Перехватывать обычную прокрутку страницы
Не перенаправляйте любое вертикальное движение в горизонтальную ленту без ясной необходимости. Человек может пытаться читать страницу дальше, а интерфейс будет удерживать его внутри ряда. Начните с нативного поведения и проверьте привычные способы управления.
Обрезать карточку фиксированной высотой
Длинный текст и увеличение могут сделать карточку выше ожидаемого. Если скрыть переполнение по вертикали, часть сведений или действий исчезнет. Проверьте реальные данные и обеспечьте полный доступ к содержимому.
Добавлять автоматическую смену без отдельного решения
Scroll-snap сам по себе не требует автоматического движения карточек. Если проекту нужна такая функция, отдельно продумайте управление, остановку и доступность. Не превращайте простой прокручиваемый ряд в самодвижущийся интерфейс случайным дополнением.
Как проверить
- Горизонтальное переполнение ограничено нужной областью.
- Продолжение ленты заметно до первого жеста.
- Каждая карточка и её действия полностью доступны.
- Клавиатурный фокус виден и не застревает внутри блока.
- Начальная и последняя позиции читаются без неудобного обрезания.
- Увеличение текста не скрывает содержание.
- Вертикальная прокрутка страницы остаётся предсказуемой.
Для настройки ряда разберите раскладку на Flexbox, проверьте управление с клавиатуры и изображения карточек. Реализацию можно обсудить в разделе «Разработка».
Вопросы и ответы
Scroll-snap делает ленту прокручиваемой?
Нет. Сначала нужны раскладка с переполнением и соответствующее overflow. Привязка управляет остановкой уже существующей прокрутки.
Почему proximity не всегда выравнивает карточку?
Этот режим допускает привязку вблизи точки, но не требует её после каждой остановки. Расстояние и поведение определяет браузер.
Нужно ли сразу выбирать mandatory?
Нет. Проверьте, действительно ли обязательная привязка нужна, и доступно ли всё содержимое при её использовании.
Куда назначать scroll-snap-align?
На элементы, которые должны образовывать точки привязки, например карточки внутри прокручиваемой области.
Почему все карточки сжались в один ряд без прокрутки?
Проверьте размеры и правила сжатия элементов раскладки. Если они помещаются в область, переполнения и движения не будет.
Достаточно ли проверить жест на телефоне?
Нет. Проверьте клавиатуру, мышь или трекпад, увеличение текста и доступ к началу и концу ленты.