CSS scroll-snap-type — прокрутка з прилипанням

CSS властивість scroll-snap-type вмикає на контейнері прокрутку з прилипанням: рух зупиняється не будь-де, а на визначених точках.

правити

Загальний опис

Це головна властивість механізму scroll snap — каруселі й галереї без жодного JavaScript. Контейнер оголошує вісь і строгість, а діти через scroll-snap-align кажуть, якою точкою прилипати.

Вісь: x (горизонтальна карусель), y (вертикальні секції-екрани), both.

Строгість: mandatory — прокрутка завжди доїжджає до точки (найкраще для каруселей, де елемент займає весь кадр); proximity — прилипає лише коли зупинилась поруч, а вільну прокрутку не ламає. Для довгих сторінок із секціями безпечніший саме proximity: mandatory там може не дати додивитись вміст, вищий за екран.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	69	99	11	56	79	10*

Підтримка: мобільні переглядачі

Переглядач
	69	69	68	11

Приклади

+ запропонувати свій приклад у пісочниці

<div class="strip">
    <div>Кадр 1</div><div>Кадр 2</div><div>Кадр 3</div>
</div>

.strip {
    display: flex;
    overflow-x: auto;
    /* вісь x, зупинка на кадрі обов'язкова */
    scroll-snap-type: x mandatory;
}

.strip div {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: 3rem 1rem;
    background: #eef6ff;
    border-right: 2px solid #fff;
    text-align: center;
}