Как использовать CSS Scroll Snap

Scroll Snap позволяет настраивать скроллинг страницы с помощью CSS и без JavaScript. Сегодня я покажу, как использовать данную технологию.

Что делает CSS Scroll Snap?

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

Как работает Scroll Snap

CSS Scroll Snap использует два основных свойства: scroll-snap-type и scroll-snap-align. Что нужно знать о них:

• Свойство scroll-snap-type, применяется к родительскому контейнеру. Оно принимает два аргумента: направление привязки и поведение привязки.

.container {
 scroll-snap-type: [ x | y | block | inline | both ] [ mandatory | proximity ];
}

Об аргументах поведения привязки: proximity заставляет привязку появляться в точке, в которой пользователь прекратил прокрутку. mandatory задает привязку в определенной позиции, которую вы задаете, когда пользователь выполняет прокрутку.

• Свойство scroll-snap-align применяется к дочерним элементам контейнера.

В нем вы указываете точку привязки для оси x и оси y:

.children {
 scroll-snap-align: [ none | start | end | center ]{1,2};
}

Но ни одно из этих свойств не будет работать, если указать свойство overflow для контейнера и не установить для него фиксированную высоту. При этом нельзя использовать mandatory, если содержимое внутри одного из дочерних элементов длиннее, чем родительский контейнер. Иначе пользователь просто не сможет увидеть контент.

Есть еще два свойства, с которыми нужно ознакомиться:

1. scroll-padding (применяется к родительскому контейнеру) – это свойство похоже на свойство padding и действует как смещение. Также есть свойства scroll-padding-top, scroll-padding-bottom, scroll-padding-left и scroll-padding-right.
2. scroll-margin (применяется к дочерним элементам контейнера) похоже на margin и служит для установки начального значения. Также есть свойства scroll-padding-top, scroll-padding-bottom, scroll-padding-left и scroll-padding-right .

Чтобы узнать больше обо всех свойствах CSS Scroll Snap, ознакомьтесь с документацией Mozilla.

Как использовать CSS Scroll Snap для создания карусели в стиле Instagram

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

В нее входят семь блоков различных размеров. Добавьте приведенные ниже строки CSS-кода, чтобы реализовать автоматическую прокрутку с привязкой к каждому блоку.

<style>
.container {
    width: 60vw;
    height: 70vh;
    margin: 15vh auto;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    color: white;
    background-color: oldlace;
    display: flex;
    align-items: center;
}

.child {
    margin-left: 0.5rem;
    height: 90%;
    scroll-snap-align: start;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.child:nth-child(1n) {
    background-color: darkorchid;
    flex: 0 0 80%;
}

.child:nth-child(2n) {
    background-color: indigo;
    flex: 0 0 60%;
}

.child:nth-child(3n) {
    background-color: navy;
    flex: 0 0 40%;
}

.child:nth-child(4n) {
    background-color: palegreen;
    flex: 0 0 50%;
}

.child:nth-child(5n) {
    background-color: yellow;
    flex: 0 0 80%;
}

.child:nth-child(6n) {
    background-color: orange;
    flex: 0 0 60%;
}

.child:nth-child(7n) {
    background-color: tomato;
    flex: 0 0 80%;
}
</style>

Как CSS Scroll Snap поддерживается браузерами?

Scroll Snap хорошо поддерживается во всех современных браузерах.

Единственная проблема – это Internet Explorer, который требует более старой версии спецификаций. Их можно найти здесь.

Также я бы посоветовала использовать для контейнера свойство -webkit-overflow-scrolling: touch, чтобы добавить поддержку iOS-устройств.

Заключение

CSS Scroll Snap помогла мне сэкономить часы работы. Попробуйте реализовать подобное решение с помощью JavaScript. Тогда вы поймете, что именно я имею в виду.

Дайте знать, что вы думаете по этой теме статьи в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, лайки, дизлайки, подписки!