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

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

Скроллинг является одним из самых совершаемых действий на сайте. Браузеры на протяжении многих лет имеют улучшена производительность прокрутки чтобы соответствовать гибкости пальцев пользователей. И разработчики имеют использовал прокрутку творчески добиться лучшего или нестандартного пользовательского опыта.

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

Прокрутка без точек прокрутки

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

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

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

Прокрутка с точками прокрутки

Это то, где мы приносим CSS точки прокрутки. Имя говорит само за себя; это стандарт CSS, который позволяет нам привязывать предметы на место при прокрутке.

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

1. прокрутки-оснастка типа
2. прокрутки оснастки точек-х
3. прокрутки оснастки точки-й
4. прокрутки-оснастка координат
5. прокрутки-оснастка назначения

Поддержка браузера

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

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

Тем не менее, они будут иметь аналогичную цель как бывшие свойства. В настоящее время прежний набор свойств будет работать просто отлично.

свойства

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

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

прокрутки оснастки точек-х а также прокрутки оснастки точки-й свойства принадлежат к контейнеру прокрутки, тоже. Они относятся к точкам на осях X и Y, где будут существовать точки привязки. Их ценность дано повторение() функция. Например, если вы хотите добавить точки привязки вдоль оси X с интервалом 100px вам нужно использовать scroll-snap-points-x: repeat (100px) правило.

прокрутки-оснастка назначения свойство также добавляется в контейнер прокрутки. Это определяет координату на контейнере где находится пункт назначения оснастки. Именно в этом месте привязки дети контейнера защелкнутся при прокрутке.

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

Обратите внимание, что вам не нужно использовать все свойства одновременно. Только прокрутки-оснастка типа является обязательным. Наряду с этим вы можете либо определить отдельные точки привязки, либо использовать комбинацию назначения и координат.

Пример кода

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

 div ширина: 300 пикселей; высота: 300 пикселей; переполнение: авто;… div> img width: 250px; высота: 150 пикселей;… 

Теперь мы добавить несколько точек привязки к контейнеру прокрутки:

 div ширина: 300 пикселей; переполнение: авто; scroll-snap-points-y: repeat (150px); scroll-snap-type: обязательно;  

Ниже вы можете увидеть, как выглядит вывод Добавлены точки привязки CSS. Обратите внимание, что когда прокрутка останавливается, а нижнее изображение видно только частично, появляется полное изображение после того, как окно прокрутки щелкает в точке привязки над ним.