Многим из вас наверняка приходилось иметь дело с версткой страниц, в которых каждая секция должна занимать весь экран окна. Навигация по такой странице, кроме кликабельной части, обычно ещё завязана на скролле - при любом положении ползунка необходимо было дополнительно прокручивать страниц так, чтобы в области видимости мы всегда видели полноценную секцию. Решения обычно были в виде самописных скриптов либо подключения плагинов.
Свойства CSS спецификации Scroll Snap позволяют настроить поведение браузера при прокрутке так, чтобы оно подстраивалось под контент.
Пример того, как будет работать прокрутка страницы с применением этих свойств:
Что необходимо для такой реализации в плане разметки - родительский элемент-обертка слайдов и дочерние секции, составляющие содержимое страницы:
<div class="scroll-wrapper">
<div class="scroll-section section1">
<h2>Section 1</h2>
</div>
<div class="scroll-section section2">
<h2>Section 2</h2>
</div>
<div class="scroll-section section3">
<h2>Section 3</h2>
</div>
</div>Далее примарафечиваем внешний вид и применяем набор из двух свойств scroll-snap - один к контейнеру, второй к дочерним элементам:
.scroll-wrapper {
/* обозначаем высоту контейнера и указываем о вертикальной прокрутке в нем */
height: 100vh;
overflow-y: auto;
/* определяем привязку прокрутки */
scroll-snap-type: y mandatory;
}
.scroll-section {
/* обозначаем высоту секции */
height: 100vh;
/* настраиваем поведение прокрутки для секции */
scroll-snap-align: start;
}Будьте внимательны при изменении поведения прокрутки вашей страницы, поскольку это может привести к некоторым непреднамеренным побочным эффектам, например, когда пользователь не сможет прокручивать определенные части вашей страницы.
Как видим, ключевыми свойствами спецификации Scroll Snap являются scroll-snap-type и scroll-snap-align. Первое используется в контейнере прокрутки для указания типа и направления прокрутки, второе - для дочерних элементов, чтобы установить положение, к которому будет привязана прокрутка. Давайте рассмотрим возможности этих свойств подробней.
Свойство scroll-snap-type
Свойство scroll-snap-type должно знать направление, в котором происходит привязка прокрутки. Это может быть ось x или y, а может быть ось своего контейнера: block или inline. Вы также можете использовать значение both, чтобы привязка прокрутки работала по обеим осям. Любой из этих пяти параметром должен быть первым значением свойства scroll-snap-type.
Второй параметр отвечает за строгость привязки, его значениями могут быть mandatory, proximity или none. Значение mandatory сообщает браузеру, что контент обязательно должен привязываться к определенной точке, независимо от того, где находится прокрутка. Значение proximity менее строгое - с ним привязка к точке будет осуществляться, если браузер сочтет это целесообразным.
Значение mandatory идеально подходит для реализации примера выше, однако, как упоминалось, к его применению нужно подходить с умом. Если вы не уверены, что контент блока будет вмещаться в пользовательское окно - лучше использовать proximity.
Значение none просто отменит любую привязку контента.
Свойство scroll-snap-align
Свойство scroll-snap-align может принимать значение start, end или center, что указывает на точку, к которой должно быть привязано содержимое контейнера прокрутки. В приведенном ниже примере вы можете изменить значение scroll-snap-align, чтобы увидеть, как это меняет поведение прокрутки.
Отступы привязки прокрутки
Если вы не хотите, чтобы контент привязывался прямо к краю контейнера прокрутки, вы можете использовать свойства scroll-padding и scroll-margin, чтобы установить отступы скролла. Визуально, поведение при использовании этих свойств одинаковое, однако разница в том, что scroll-padding применяется к родительскому элементу, а scroll-margin - к дочернему. Свойства полезно применять, когда у вас к примеру есть фиксированный хэдер, который может закрыть часть контента.
Свойство scroll-snap-stop
Свойство scroll-snap-stop сообщает браузеру, должен ли он привязываться к каждой обозначенной точке контента; это означает, что для примеров выше мы будем иметь возможность останавливаться не на каждом разделе. Свойство может быть полезно для того, чтобы пользователи видели каждый раздел полноценно и не проскакивали мимо них случайно. Поддержка scroll-snap-stop была реализована в более поздних версиях браузеров, чем остальная часть спецификации.
Комментарии (0)