Создайте красивую прокрутку с помощью CSS Scroll Snap
Вы когда-нибудь хотели создать веб-сайт, который позволял бы вам переходить прямо к определенному разделу страницы с помощью одной прокрутки? (Для демонстрации см. GIF-изображение ниже):
Благодаря функции CSS Scroll Snap добиться такого поведения очень легко.
Узнайте все, что вам нужно знать о привязке прокрутки CSS, включая ее различные свойства и уникальные эффекты привязки прокрутки. К концу этой статьи у вас будет вся информация, необходимая для реализации этого элегантного поведения на ваших собственных веб-сайтах.
Настройка страницы
Создайте файл с именем index.html в пустой папке. Затем откройте эту папку с помощью текстового редактора и вставьте следующую разметку:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll Snap Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>Heading</nav>
<div>
<section>
<h2>Page 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae rerum fugit ad quos ipsa consequatur quidem doloribus necessitatibus, temporibus exercitationem porro. Itaque velit sapiente unde dolor alias libero iste. Modi quam numquam expedita iste saepe voluptates id inventore, aliquid sint in culpa.</p>
</section>
<!-- Add four other sections here -->
</div>
</body>
</html>У нас есть элемент div, содержащий пять отдельных разделов. В каждом разделе есть H2 (с заголовком страницы) и текст абзаца.
Для краткости я исключил последние четыре раздела из примера HTML. Скопируйте и вставьте первый раздел на четыре позиции вниз, затем просто измените заголовок на «Страница 2», «Страница 3» и т. д.
Теперь, чтобы стилизовать страницу, создайте файл с именем style.css в той же папке, что и index.html, и вставьте следующую разметку CSS:
h2 {
font-size: 40px;
}
p {
font-size: 30px;
}
nav {
display: none;
height: 30px;
text-align: center;
padding: 4px;
font-size: 30px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
}
.one {
background-color: #ADD8E6;
}
.two {
background-color: #FFC0CB;
}
.three {
background-color: yellow;
}
.four {
background-color: #CBC3E3;
}
.five {
background-color: orange;
}По умолчанию мы скрыли область навигации и присвоили каждому разделу уникальный цвет фона.
Вот результат:
Из приведенного выше GIF-изображения вы можете видеть, что мы медленно скользим вниз, перетаскивая полосу прокрутки. Давайте изменим это, добавив свойство привязки прокрутки CSS.
Основы привязки прокрутки
По сути, для реализации привязки прокрутки необходимы две вещи: контейнер, внутри которого вы собираетесь прокручиваться, и сами «прокручиваемые» элементы.
В нашем случае элемент <html> является контейнером, поэтому мы определяем стиль прокрутки-привязки непосредственно для него:
html {
scroll-snap-type: mandatory;
}Свойство scroll-snap-type поддерживает три значения:
- none: это значение по умолчанию, привязка к прокрутке отсутствует
- mandatory: привязывается к следующему разделу каждый раз при прокрутке
- proximity: прокручивается нормально, но как только вы прекращаете прокрутку, вы переходите к ближайшему разделу
Если вы сохраните файл и проверите свой браузер, вы заметите, что объявление scroll-snap-type ничего не делает.
Это потому, что вам все равно нужно указать направление, к которому вы хотите привязаться, и способ прокрутки привязки. Поэтому добавьте в style.css следующую разметку CSS:
html {
scroll-snap-type: y mandatory;
}
section {
/* Other CSS rules */
scroll-snap-align: start;
}x — для горизонтальной прокрутки, y — для вертикальной, и both — для привязки в обоих направлениях. В нашем случае мы прокручиваем его в вертикальном направлении, то есть y. Добавляя scroll-snap-align: start к элементу раздела, мы говорим CSS каждый раз привязываться к началу элемента (а не к его концу или середине).
Теперь, когда вы сохраните файл и проверите свой браузер, вы заметите, что всякий раз, когда вы прокручиваете вниз или вверх с помощью полосы прокрутки, вы сразу переходите к следующему разделу.
Расширенные функции Scroll Snap
CSS Scroll Snap имеет множество свойств для настройки поведения прокрутки. Но в вашем проекте вы будете часто использовать два элемента: scroll-snap-stop и scroll-padding.
Свойство scroll-snap-stop полезно при проектировании для мобильных устройств. Если установлено значение always, прокрутка останавливается независимо от того, насколько сильно вы прокручиваете экран мобильного телефона:
section {
/* Other CSS rules */
scroll-snap-stop: always;
}Это не позволит вам пропустить кучу вещей, потому что на самом деле они остановятся на следующей странице, независимо от того, насколько велика ваша прокрутка.
Далее идет scroll-padding. Вы можете использовать прокрутку в контейнере прокрутки (в нашем случае в HTML-теге), чтобы добавить отступы между элементами прокрутки и полями контейнера.
Это полезно, если у вас есть элемент в верхней части страницы (например, меню навигации или заголовок), который вы не хотите конфликтовать с элементами прокрутки. В следующем примере, поскольку у нас есть область навигации высотой 30 пикселей, нам нужно добавить scroll-padding-top размером 30 пикселей:
html {
scroll-snap-type: y mandatory;
/* Add the following: */
scroll-padding-top: 30px;
} На GIF-изображении ниже вы можете видеть, что каждый раздел сдвинут на 30 пикселей вниз от самого верха, чтобы разместить элемент навигации.
Заключение
CSS Scroll Snap позволяет указать, как прокрутка будет привязываться к определенным позициям, когда пользователь прокручивает документ. Он также включает в себя функции для лучшей настройки поведения прокрутки, например указание способа привязки и заполнения между контейнером и элементами прокрутки.
