scroll-snap-align: точка привязки конкретного элемента

Назначение

Scroll-snap-align задаёт выравнивание элемента при привязке прокрутки. Его применяют к элементам внутри контейнера с включённым scroll-snap-type, а не только к самому контейнеру.

Как это работает

Start, center и end описывают нужную точку выравнивания области элемента. Один аргумент применяется к обеим осям. Пример выбирает центр карточки для горизонтальной ленты.

Пример

<style>.snap-align-demo{display:flex;overflow-x:auto;gap:1rem;scroll-snap-type:x proximity;padding-inline:1rem}.snap-align-demo article{flex:0 0 80%;scroll-snap-align:center;padding:1rem;box-sizing:border-box;background:#dfefe5}</style>
<div class="snap-align-demo" tabindex="0" role="region" aria-label="Примеры выравнивания"><article><h3>Первый</h3><p>Сравните положение карточки.</p></article><article><h3>Второй</h3><p>Прокрутите дальше.</p></article><article><h3>Третий</h3><p>Проверьте край ленты.</p></article></div>

Что должно получиться

Внутренние карточки могут выравниваться относительно центра области прокрутки. У первого и последнего элемента физический предел прокрутки способен ограничить достижимое положение.

Граница применения и частая ошибка

Если свободного пространства по краям нет, нельзя ожидать идеального центрирования крайней карточки. Scroll-padding влияет на область привязки, scroll-margin — на область элемента; обычный margin решает другую задачу. Без scroll-snap-type точки сами по себе не включают привязку.

Самостоятельная проверка

Сравните start и center на средней карточке. Затем проверьте края, добавив нужные реальные отступы в учебном макете. Убедитесь, что текст не обрезается при увеличении масштаба и клавиатурной прокрутке.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Переполнение
• Уменьшение движения
• Лента с привязкой