Автор оригинала: Harish Rajora.
Вы когда-нибудь заметили, что при прокрутке на каком-то веб-сайте на ваших мобильных устройствах прокручивайтесь резко на некоторых веб-сайтах, и на других веб-сайтах это идеально? Разве это не раздражает, когда вы прокрутите вниз на странице, и она заканчивается в середине абзаца или изображения? Это связано с тем, что прокрутка не хватает точности самостоятельно. В течение длительного периода времени разработчики полагались на JavaScript, чтобы получить лучший контроль. В последнее время CSS Scroll Snap широко использовался разработчиками для хорошо контролируемого опыта прокрутки.
В этой статье на CSS Scroll Snap Я буду обсуждать, как эта недвижимость может улучшить пользовательский опыт и как вы можете реализовать его.
Что такое CSS Scroll Snap?
CSS Scroll Snap – это свойство, срабатываемое в ходе обычной прокрутки, но здесь вместо того, чтобы остановиться в точке, когда пользователь остановил событие прокрутки, веб-страница завязается к определенной позиции, описанной веб-разработчиком. Например, если пользователь прокручивается до половины поля div, ящик div автоматически привязан к верхней части его края (позиция зависит от разработчика). Этот процесс аналогичен блокировке просмотра просмотра до определенной области веб-страницы, чтобы всякий раз, когда пользователь не находится в этой области, веб-страница автоматически завязает его.
Чтобы понять Scroll CSS Scroll, лучше сначала увидеть разницу. В следующем GIF создается при прокрутке нормально (без применения ни одного свойства Scroll-Snap).
После применения свойства Scroll-Snap создается следующий GIF.
Если вы пропустили его, в обычной прокрутке я могу остановиться в середине двух разных разделов, но не происходит, пока у меня активирована прокрутка. Он автоматически завязывает. Snap Scroll CSS может быть применен к любому элементу в веб-странице, что разработчик хочет и на разных осях тоже. В отличие от свойства PSS Position, Snap CSS Scroll требует объявления разных свойств для работы вместе.
Свойства CSS Scroll Snap
Функция Snap CSS Scroll содержит два свойства, которые могут быть широко классифицированы в родитель или свойство контейнера и дочернее свойство.
Свойство родителей или контейнера (Scroll-Snap-Type):
Это свойство должно быть указано для родителя элемента или элемента контейнера веб-страницы. Свойство, которое подпадает под эту категорию, называется Scroll-Snap-Type Отказ Свойство Snap-Snap-Type определяет тип поведения, который разработчик хочет дать на элемент контейнера прокрутки. Он содержит два значения, которые определяют направление прокрутки и поведение прокрутки.
Направление прокрутки
Направление свитка – это направление, в котором вы хотите применить свойство Scroll-Snap-Type. Он имеет значения либо x (для горизонтального направления), либо Y (для вертикального направления) или обоих (для прокрутки в обоих направлениях).
Поведение свитка
Поведение свитка означает тип прокрутки, который вы хотели бы подать заявку. Это содержит два разных значения:
Обязательно : Обязательное значение всегда принимает элемент к точке прокрутки, определенную пользователем независимо от его положения прокрутки.
Близость : Значение приближения принимает элемент в точку прокрутки Только когда пользователь ближе к точке прокрутки Отказ
Следующая ручка демонстрирует использование прокрутки с помощью обоих значений с направлением вертикального перемещения. Используемый код выглядит следующим образом:
Для Scroll-Snap-Type: Y обязательно
Примечание: Прокрутите медленно в разделе Результат, чтобы просмотреть эффект прокрутки CSS.
Чтобы увидеть разницу между ценностью близости, измените линию кода Scroll-Snap-Type следующим образом:
Scroll-Snap-Type: у близости
Горизонтальное направление ведет себя аналогичным образом, как вертикальный, но как разработчик, вы также имеете право на использование как в качестве значения, в котором прокрутка происходит в горизонтальном, а также на вертикальном порядке. Хотя, как веб-разработчик, я бы предпочел не рекомендовать предоставить пользователю liberty прокрутить как в направлениях, потому что это действительно плохая практика на UX часть веб-сайта.
Теперь, когда родитель все настроен, нам нужно применить свойство для дочернего элемента.
Детская собственность (Scroll-Snap-Alight):
CSS Scroll Snap требует свойства, называемую Scroll-Snap-Alight к дочерним элементам. Scroll-Snap-Align-Align, поскольку имя предлагает для выравнивания элемента при появлении Scs Scroll CSS. Таким образом, если это установлено значение «Центр», элемент будет выровняться в центре контейнера/родительского элемента. Свойство Snap-Align-Align-Alignate принимает три значения:
- Начать: Относится к левому краю элемента при прокрутке горизонтально или верхнего края.
- Конец: Относится к правильному краю элемента, если прокрутка горизонтально или нижний край.
- Центр: Относится к центру элемента.
Как создать CSS Scroll Snap?
CSS Scroll Snap очень прост в создании с использованием CSS. Мы просто должны помнить родительское свойство и имущество ребенка и применить их к соответствующим элементам. Следующий код демонстрирует функцию Scroll-Snap с прокруткой элемента контейнера в вертикальном направлении (с обязательным значением) и Scroll-Snap Alight, набор как «запуск».
Scroll Snap
This is Section 1
This is Section 2
This is Section 3
This is Section 4
This is Section 5
This is Section 6
This is Section 7 -->
Обязательная VS близость в ширине прокрутки
Как я уже упоминал в вышеупомянутом сечении, тип Snap-Snap принимает два значения: обязательно и близость. В непосредственной близости от Scroll-Snap-Type, браузер завязывает к точке прокрутки только тогда, когда пользователь ближе к точке прокрутки. Принимая во внимание, что в обязательном виде Snap-Snap-Type браузер завязывает к точке прокрутки, определенную пользователем независимо от его положения прокрутки.
Как веб-разработчик, вы должны знать, что, хотя обязательное значение более последовательно, он может повысить проблемы в паре ситуаций.
Ситуация 1: Если длина содержимого внутри элемента Scroll-Snap больше превышает просмотра или длина контейнера, то содержание не будет полностью видно. В таком случае, если пользователь немного проводит вниз, чтобы прочитать контент, он будет обременен на верхний край элемента, давая результаты для плохого пользовательского опыта.
Ситуация 2: Еще одна ситуация, когда «обязательное» значение может испортить, является когда длина элемента прокрутки больше длины просмотра/контейнера. В такой ситуации, опять же, если пользователь прокручивается вниз, чтобы увидеть элемент прокрутки, он будет обременен на верхний край элемента.
Следующий код поможет вам понять, насколько обязательное значение может испортить прокрутку.
Эти две ситуации должны быть должным образом управляться не только на рабочих столах, но и на других устройствах, учитывая проблемы совместимости кросс-браузера, которые могут возникнуть. Но это, как говорится, как веб-разработчик, я уверяю вам, что обязательна на самом деле является более полезным значением для использования. Если в качестве разработчика вы уверены в длине элемента, и содержание, проживающее в нее, обязательное значение обеспечит более последовательный пользовательский опыт.
CSS Scroll Snap очень хорошо принимается в сообществе разработчика, потому что в отличие от Groad-Scroll, который был лучше в JavaScript, Scroll-Snap выполняет цели полностью в CSS. Но, как и любое другое свойство, Scroll-Snap использовалось задолго до того, как он был введен в качестве стандарта в списке CSS. Разработчики использовали JavaScript и jQuery для того же, но с момента его введения в CSS эти методы больше не принимаются.
Использование Scroll-Snap с JavaScript
В моей предыдущей статье на Гладкий свиток Я рекомендовал использовать JS или jQuery там, так как он дал разработчику больше контроля над элементами, которые он обрабатывает и обеспечивает больше вариантов использования. Это прямо напротив в прокрутке. Я бы предпочел не рекомендовать принимать ход js и придерживаться CSS, поскольку он обеспечивает больше гибкости, больше удобства, более точных и достаточных функций, которые необходимость добавления дополнительных функций не возникает. Кроме того, трудно найти кого-либо, используя чистый JavaScript для Scroll-Snap, поскольку jQuery предоставлял плагины с открытым исходным кодом, которые были более гладкими и легкими для кода, чем JS.
Как создать Scroll Snap с jQuery?
Подобно JavaScript Road, я предпочитаю не реализовать Scroll-Snap в jQuery по тем же причинам. Хотя люди не используют jQuery сегодня после недвижимости Snap CSS Scroll, это был предпочтительный маршрут для разработчиков до. Разработчики разработали различные плагины для создания прокрутки в jQuery. В этом разделе я обсудил плагин Panelsnap, который является открытым исходным кодом и простой в реализации. После данных шагов вы можете создать щелкнуть элемент на веб-странице.
Импортируйте плагин для использования в JavaScript:
PanelSnap инициализируется путем создания объекта со следующим кодом:
Новые Panelsnap ();
Выберите родительский контейнер Scroll-Snap, здесь я выбрал элемент тела.
new PanelSnap({
container: document.body,
panelSelector: '> section',
});
Выберите элемент, к которому вы хотите прокрутить.
instance = new PanelSnap(); instance.snapToPanel( element );
И вы можете запустить комбинированный код JQuery один раз, когда-то сделан с необходимыми вещами. Вы также можете добавить больше функций, позвонив встроенные функции через объект экземпляра.
Это довольно яркое, что используя