Многим из вас наверняка приходилось иметь дело с версткой страниц, в которых каждая секция должна занимать весь экран окна. Навигация по такой странице, кроме кликабельной части, обычно ещё завязана на скролле - при любом положении ползунка необходимо было дополнительно прокручивать страницу так, чтобы в области видимости мы всегда видели полноценную секцию. Решения обычно были в виде самописных скриптов либо подключения плагинов.
Свойство 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;
}
Будьте внимательны при изменении поведения прокрутки вашей страницы, поскольку это может привести к некоторым непреднамеренным побочным эффектам, например, когда пользователь не сможет прокручивать определенные части вашей страницы.
Комментарии (0)