Загрузка...CSS-свойство scroll-snap позволяет настраивать прокрутку и определять точки, в которых она должна останавливаться – «точки привязки». Это может быть полезно для создания более похожего на приложение поведения на мобильном устройстве или даже для некоторых типов приложения на рабочем столе.
Это свойство можно использовать для создания эффектов, которые в ранее требовали большого количества JavaScript (и не всегда с удовлетворительным результатом).
Основная идея в реализации родительского элемента с прокручиваемым содержимым и набор дочерних элементов (или разделов), до которых должна перемещаться прокрутка.
.parent {
// у контейнере-родителя должно быть
// прокручиваемое содержимое
height: 100vh;
overflow: auto;
// настройка scroll snap
// y = по оси y; mandatory = принудительная
// прокрутка к следующей точке
scroll-snap-type: y mandatory;
// альтернативные варианты
// x = по оси x; proximity = привязка реализуется
// при приближении к точке привязки
scroll-snap-type: x proximity;
}Поддержка css-свойств scroll-* в вашем браузере
scroll-snap-align
scroll-snap-stop
scroll-snap-type
scroll-margin
scroll-padding