CSS Scroll Snap Одной из основных причин появления спецификац | Senior Frontend - javascript, html, css

CSS Scroll Snap

Одной из основных причин появления спецификации CSS Scroll Snap является обеспечение разработчиков удобными средствами для организации хорошо контролируемой прокрутки содержимого страниц.

Для того чтобы создать элемент-контейнер, поддерживающий прокрутку, понадобится следующее:
1. Использование свойства из группы свойств overflow со значением, отличающимся от visible.
2. Применение некоего способа вывода элементов в контейнере, позволяющего расположить их рядом друг с другом (inline-элементы).

Это - база, на основе которой создаются контейнеры, поддерживающие прокрутку. Но для достижения нашей цели одного этого недостаточно. Для того чтобы с подобным контейнером было бы удобно работать, над ним ещё надо потрудиться.

Для того чтобы воспользоваться возможностями CSS Scroll Snap дочерние элементы должны выводиться внутри контейнера в inline-режиме.

.section {
display: flex;
overflow-x: auto;
}

Теперь нам, чтобы спецификация CSS Scroll Snap заработала бы, нужно воспользоваться ещё парой свойств. Главный вопрос тут заключается в том, куда именно их нужно добавить.

Сначала надо добавить свойство scroll-snap-type к контейнеру, поддерживающему прокрутку. В нашем примере это — элемент с классом section. Затем нужно добавить свойство scroll-snap-align к дочерним элементам/

.section {
scroll-snap-type: x mandatory;
}

.section__item {
scroll-snap-align: start;
}

Благодаря использованию этих свойств мы настроили элементы, выводимые в контейнере, так, что они будут привязаны к началу контейнера.
Вот как это выглядит.