Горизонтальная лента: мягкая привязка прокрутки к карточкам
Scroll snap помогает завершать прокрутку рядом с границей карточки. Он не создаёт автоматически карусель, кнопки управления или доступные подписи.
Назначение
Scroll snap помогает завершать прокрутку рядом с границей карточки. Он не создаёт автоматически карусель, кнопки управления или доступные подписи.
Как это работает
Контейнер получает overflow-x:auto и scroll-snap-type, карточки — scroll-snap-align. Proximity оставляет браузеру больше свободы, чем обязательная привязка. Пример не включает автоматическую прокрутку.
Пример
<style>.snap-row{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding:1rem}.snap-row section{flex:0 0 75%;scroll-snap-align:start;padding:1rem;background:#e7f4ec}.snap-row:focus-visible{outline:3px solid #176b50}</style>
<div class="snap-row" tabindex="0" role="region" aria-label="Три учебные карточки"><section><h3>Разметка</h3><p>Опишите структуру.</p></section><section><h3>Оформление</h3><p>Проверьте размеры.</p></section><section><h3>Проверка</h3><p>Откройте узкое окно.</p></section></div>Что должно получиться
Лента прокручивается горизонтально, и при подходящем завершении жеста карточка выравнивается по началу. Конкретное ощущение привязки зависит от браузера и устройства ввода.
Граница применения и частая ошибка
Жёсткая привязка способна мешать доступу к содержимому карточки, превышающему область просмотра. Не скрывайте сам факт продолжения ленты. Добавление tabindex нужно проверять клавиатурой, а не считать готовым доказательством доступности.
Самостоятельная проверка
Прокрутите ленту мышью, клавиатурой и на телефоне. Удлините один текст, увеличьте масштаб и проверьте доступность всей карточки. Отключите snap: содержимое должно оставаться доступным обычной прокруткой.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.