CSS scroll-snap-stop — заборона пропускати точки прилипання

CSS властивість scroll-snap-stop вирішує, чи може швидка прокрутка пролетіти повз точку прилипання: normal — може, always — зупиниться на кожній.

правити

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

Енергійний свайп на сенсорному екрані за замовчуванням пролітає кілька точок одразу — для довгої галереї це зручно. Але буває, що кожен слайд мусить бути побачений: покрокові інструкції, онбординг, оплата по кроках. Тоді дітям ставлять scroll-snap-stop: always — один жест, один крок.

Працює лише всередині вже налаштованого scroll snap (scroll-snap-type + scroll-snap-align) і головно з mandatory.

Ціна: у довгих списках always починає дратувати — двадцять свайпів замість двох. Тож він для коротких послідовностей, де кожен крок важливий.

правити

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

Переглядачі

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

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

Переглядач
	75	103	15	62	79	—

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

Переглядач
	75	75	103	15

Приклади

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

<div class="steps">
    <div>Крок 1</div><div>Крок 2</div><div>Крок 3</div>
</div>

.steps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.steps div {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* швидкий свайп НЕ пролетить повз */
    scroll-snap-stop: always;
    padding: 3rem 1rem;
    background: #eef6ff;
    border-right: 2px solid #fff;
}