CSS scroll-snap-align — точка прилипання елемента

CSS властивість scroll-snap-align каже, якою точкою елемент вирівнюється при прокручуванні з прилипанням: початком, центром чи кінцем.

правити

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

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

start — елемент прилипає переднім краєм (типово для повнокадрових каруселей), center — центрується у вікні перегляду (галереї, де сусідні кадри визирають з боків), end — заднім краєм.

Без цієї властивості прилипання не працює взагалі: контейнер увімкнув механізм, але точок немає — найчастіша причина «чому scroll snap не працює».

правити

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

Переглядачі

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

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

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

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

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

Приклади

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

<div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

.gallery {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 1rem;
}

.gallery div {
    flex: 0 0 70%;
    /* прилипає ЦЕНТРОМ вікна */
    scroll-snap-align: center;
    padding: 3rem 0;
    background: #eef6ff;
    text-align: center;
}