CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript
Можно создать слайдер и даже реализовать полноэкранную прокрутку на чистом CSS. Это отлично работает на мобильных устройствах!
Чтобы создать прокручиваемый контейнер, нужно настроить отображение содержимого — его не должно быть видно за пределами блока. Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:
See the Pen
Basic Slider by Pochemuta (@pochemuta)
on CodePen.
Получился стандартный слайдер, который уже работает. Но он плох тем, что на мобильных устройствах его нельзя листать свайпом. Пользователям приходится перемещать элементы через весь экран. Это происходит из-за того, что прокрутка не учитывает содержимое просматриваемой области.
Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:
Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов.
See the Pen
Scroll Snap by Pochemuta (@pochemuta)
on CodePen.
Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap.
Поддержка в браузерах:
Актуальность проверяйте на сайте Can I Use.
Узнать больше:
Ещё интересные материалы про CSS и фронтенд: