Введение в CSS Scroll Snap Points
Модуль CSS Scroll Snap это веб-стандарт, который дает нам некоторый контроль над прокруткой на веб-странице, так что мы можем заставить пользователей прокручивать определенные части страницы, а не просто где-нибудь на ней.
Прокрутка – одно из самых совершаемых действий на сайте. За последние годы браузеры улучшили производительность прокрутки, чтобы соответствовать гибкости пальцев. И разработчики использовали прокрутку творчески, чтобы добиться лучшего или готового пользовательского опыта.
Однако, когда дело доходит до корреляции между кодированием и прокруткой, только JavaScript, похоже, имеет какое-то количество контроля над последним. Это было так в течение длительного периода времени, но с введением точек привязки прокрутки CSS начал догонять.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Читайте также: 15 примеров прокрутки, выполненных прямо в дизайне сайтов
Прокрутка без точек прокрутки
Как правило, мы не делаем прокрутку очень медленно, особенно на телефонах. Чем быстрее вы прокручиваете, тем меньше у вас контроля над тем, где на экране вы окажетесь, когда вы остановили прокрутку.
Представьте, что вы просматриваете массив изображений товаров на веб-сайте, галерею фотографий или онлайн-слайды. В таких приложениях вы предпочитаете видеть весь продукт, фотографию или слайд при каждой прокрутке. Не только часть изображения продукта, фотографии или слайда.
Например, в приведенной ниже демонстрации вы можете видеть, что когда пользователь прекращает прокрутку, в нижней части экрана отображается только около половины изображения. Однако большинство пользователей предпочли бы видеть последнее изображение полностью.
Прокрутка с точками прокрутки
Здесь мы добавляем точки привязки прокрутки CSS. Название говорит само за себя; это стандарт CSS, который позволяет нам привязывать элементы на месте при прокрутке.
Есть пять свойств CSS которые составляют этот стандарт:
- свитка оснастка типа
- Спиральные-SNAP-очки-х
- Спиральная-оснастки точка-у
- прокрутки оснастка координат
- прокрутки оснастка назначение
Поддержка браузера
Свойства должны иметь префиксы -webkit и -ms для соответствующих браузеров. На момент написания этой статьи CSS-прокрутка не поддерживалась в Chrome и Opera.
Обратите внимание, что последние четыре свойства, вероятно, будут удалены пользовательскими агентами в ближайшем будущем. Вместо этого могут быть созданы новые свойства, а именно scroll-snap-align, scroll-snap-margin и scroll-snap-padding, как определено в этом Спецификация,
Тем не менее, они будут иметь аналогичное назначение, что и прежние свойства. В настоящее время прежний набор свойств будет работать просто отлично.
свойства
Вам необходимо добавить свойство scroll-snap-type в контейнер прокрутки (элемент контейнера, дочерние элементы которого переполняются при его прокрутке). Это определяет строгость действия оснастки. Может принимать три значения:
- обязательно – когда прокрутка закончена, прокрутка будет привязана к соответствующей точке привязки
- близость – менее строгая, чем обязательная; это будет зависеть от суждения UA, будет ли элемент привязываться в заданной точке привязки
- нет – нет привязки сделано
Свойства scroll-snap-points-x и scroll-snap-points-y также принадлежат контейнеру прокрутки. Они относятся к точкам на осях X и Y, где будут существовать точки привязки. Их значение определяется повторение() функция. Например, если вы хотите добавить точки привязки вдоль оси x с интервалом 100 пикселей, вам нужно использовать правило scroll-snap-points-x: repeat (100px).
Свойство scroll-snap-destination также добавляется в контейнер прокрутки. Он определяет координату контейнера, в котором находится пункт назначения привязки. Именно в этом месте привязки потомки контейнера защелкнутся при прокрутке.
Вы можете использовать свойство scroll-snap-координировать вместе с scroll-snap-destination. Вам необходимо добавить его в дочерние элементы контейнера. Он определяет координаты дочерних элементов, которые будут выровнены с целевыми координатами их контейнера прокрутки, когда пользователь прокручивает экран.
Обратите внимание, что вам не нужно использовать все свойства одновременно. Только scroll-snap-type является обязательным. Наряду с этим вы можете либо определить отдельные точки привязки, либо использовать комбинацию назначения и координат.
Пример кода
Вот пример кода для типичного контейнера с прокруткой, с прокруткой по вертикали и несколькими изображениями внутри. Он выводит демо, которое вы можете найти в начале этого поста.




div {
ширина: 300 пикселей;
высота: 300 пикселей;
переполнение: авто;
…
}
div> img {
ширина: 250 пикселей;
высота: 150 пикселей;
…
}
Теперь мы добавим несколько точек привязки в контейнер прокрутки:
div {
ширина: 300 пикселей;
переполнение: авто;
scroll-snap-points-y: repeat (150px);
scroll-snap-type: обязательно;
}
Ниже вы можете увидеть, как выглядит вывод с добавленными точками привязки CSS. Обратите внимание, что когда прокрутка останавливается, когда нижнее изображение видимо только частично, полное изображение появляется после того, как порт прокрутки защелкнулся в точке привязки над ним.
Читайте также: JavaScript библиотеки для крутых эффектов прокрутки
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)