Введение в CSS Scroll Snap Points

Модуль CSS Scroll Snap это веб-стандарт, который дает нам некоторый контроль над прокруткой на веб-странице, так что мы можем заставить пользователей прокручивать определенные части страницы, а не просто где-нибудь на ней.

Прокрутка – одно из самых совершаемых действий на сайте. За последние годы браузеры улучшили производительность прокрутки, чтобы соответствовать гибкости пальцев. И разработчики использовали прокрутку творчески, чтобы добиться лучшего или готового пользовательского опыта.

Однако, когда дело доходит до корреляции между кодированием и прокруткой, только JavaScript, похоже, имеет какое-то количество контроля над последним. Это было так в течение длительного периода времени, но с введением точек привязки прокрутки CSS начал догонять.

Читайте также: 15 примеров прокрутки, выполненных прямо в дизайне сайтов

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

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

Например, в приведенной ниже демонстрации вы можете видеть, что когда пользователь прекращает прокрутку, в нижней части экрана отображается только около половины изображения. Однако большинство пользователей предпочли бы видеть последнее изображение полностью.
Прокрутка с точками прокрутки
Здесь мы добавляем точки привязки прокрутки CSS. Название говорит само за себя; это стандарт CSS, который позволяет нам привязывать элементы на месте при прокрутке.

Есть пять свойств CSS которые составляют этот стандарт:

1. свитка оснастка типа
2. Спиральные-SNAP-очки-х
3. Спиральная-оснастки точка-у
4. прокрутки оснастка координат
5. прокрутки оснастка назначение

Поддержка браузера
Свойства должны иметь префиксы -webkit и -ms для соответствующих браузеров. На момент написания этой статьи CSS-прокрутка не поддерживалась в Chrome и Opera.

Обратите внимание, что последние четыре свойства, вероятно, будут удалены пользовательскими агентами в ближайшем будущем. Вместо этого могут быть созданы новые свойства, а именно scroll-snap-align, scroll-snap-margin и scroll-snap-padding, как определено в этом Спецификация,

Тем не менее, они будут иметь аналогичное назначение, что и прежние свойства. В настоящее время прежний набор свойств будет работать просто отлично.
свойства
Вам необходимо добавить свойство scroll-snap-type в контейнер прокрутки (элемент контейнера, дочерние элементы которого переполняются при его прокрутке). Это определяет строгость действия оснастки. Может принимать три значения:

1. обязательно – когда прокрутка закончена, прокрутка будет привязана к соответствующей точке привязки
2. близость – менее строгая, чем обязательная; это будет зависеть от суждения UA, будет ли элемент привязываться в заданной точке привязки
3. нет – нет привязки сделано

Свойства 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 библиотеки для крутых эффектов прокрутки