scroll-snap-type
Заставляет прокручиваемый контейнер останавливаться точно на дочерних элементах — для слайдеров и галерей.
Синтаксис
scroll-snap-type: x mandatory;Значения
| Параметр | Тип | Описание |
|---|---|---|
| x | y | axis | Ось, по которой работает привязка. |
| mandatory | keyword | Всегда останавливается на точке привязки. |
| proximity | keyword | Привязывается, только если прокрутка остановилась рядом с точкой. |
| scroll-snap-align | property | Задаётся детям: какой край привязывается — `start`, `center` или `end`. |
Примеры
Слайдер без JavaScript — прокрутите его вбок:
<style>
.slider { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; width: 240px; }
.slider img { scroll-snap-align: start; width: 200px; flex-shrink: 0; }
</style>
<div class="slider">
<img src="/media/photo-400x250.jpg" alt="">
<img src="/media/photo-400x250.jpg" alt="">
<img src="/media/photo-400x250.jpg" alt="">
</div>Примечания
Свойство задаётся контейнеру, а scroll-snap-align — его детям; без обоих привязки не будет.
См. также
- scroll-behavior — Происходят ли переходы к якорям и прокрутка из кода мгновенно или плавно.
- overflow — Что делать с содержимым, которое не помещается в элемент.
- scroll-margin — Дополнительное место вокруг элемента, когда страница прокручивается к нему, — чтобы он не оказался под фиксированной шапкой.
Вопросы и ответы по теме
В учебнике
- Прокрутка — Плавная прокрутка scroll-behavior, отступ для якоря под липкой шапкой scroll-margin-top, карусель на scroll-snap и overscroll-behavior.