scroll-snap-type: направление и строгость привязки прокрутки
Scroll-snap-type включает привязку прокрутки у контейнера. Свойство задаёт ось и строгость поведения, а точки привязки определяются отдельно на дочерних элементах.
Назначение
Scroll-snap-type включает привязку прокрутки у контейнера. Свойство задаёт ось и строгость поведения, а точки привязки определяются отдельно на дочерних элементах.
Как это работает
Proximity оставляет браузеру мягкий выбор ближайшей позиции, mandatory требует привязки при завершении прокрутки. В примере используется горизонтальная ось x и proximity, чтобы ленту можно было спокойно изучить.
Пример
<style>.snap-type-demo{display:grid;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;gap:1rem;scroll-snap-type:x proximity}.snap-type-demo>p{scroll-snap-align:start;background:#e3f0e8;padding:1rem}</style>
<div class="snap-type-demo" tabindex="0" role="region" aria-label="Учебные карточки"><p>Разметка документа</p><p>Оформление блоков</p><p>Проверка результата</p></div>Что должно получиться
При горизонтальной прокрутке контейнер может останавливаться у начала карточки. Клавиатурный фокус доступен самой области, а карточки остаются обычным текстом без лишних элементов управления.
Граница применения и частая ошибка
Не блокируйте доступ к содержимому больших элементов ради красивой привязки. Проверьте мышь, сенсорный ввод и клавиатуру. Scroll-snap-type не создаёт кнопки переключения, автопрокрутку или готовую карусель с доступной моделью управления.
Самостоятельная проверка
Сравните proximity и mandatory на копии. Увеличьте длину и ширину карточки, затем проверьте доступ ко всем её частям. Отключите привязку и оцените, приносит ли она пользу именно этой ленте.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.