Css scroll snap не работает

Как использовать CSS Scroll Snap

Scroll Snap позволяет настраивать скроллинг страницы с помощью CSS и без JavaScript. Сегодня я покажу, как использовать данную технологию.

Что делает CSS Scroll Snap?

Scroll Snap реализует красивую прокрутку без необходимости использования JavaScript-библиотек. Данная технология привязывает скроллинг, блокируя область просмотра для каждой прокрутки в определенной точке, которую вы указываете.

Как работает Scroll Snap

CSS Scroll Snap использует два основных свойства: scroll-snap-type и scroll-snap-align. Что нужно знать о них:

• Свойство scroll-snap-type, применяется к родительскому контейнеру. Оно принимает два аргумента: направление привязки и поведение привязки.

Об аргументах поведения привязки: proximity заставляет привязку появляться в точке, в которой пользователь прекратил прокрутку. mandatory задает привязку в определенной позиции, которую вы задаете, когда пользователь выполняет прокрутку.

• Свойство scroll-snap-align применяется к дочерним элементам контейнера.

В нем вы указываете точку привязки для оси x и оси y:

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

Есть еще два свойства, с которыми нужно ознакомиться:

1. scroll-padding (применяется к родительскому контейнеру) – это свойство похоже на свойство padding и действует как смещение. Также есть свойства scroll-padding-top, scroll-padding-bottom, scroll-padding-left и scroll-padding-right.
2. scroll-margin (применяется к дочерним элементам контейнера) похоже на margin и служит для установки начального значения. Также есть свойства scroll-padding-top, scroll-padding-bottom, scroll-padding-left и scroll-padding-right .

Чтобы узнать больше обо всех свойствах CSS Scroll Snap, ознакомьтесь с документацией Mozilla .

Как использовать CSS Scroll Snap для создания карусели в стиле Instagram

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

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

Как CSS Scroll Snap поддерживается браузерами?

Scroll Snap хорошо поддерживается во всех современных браузерах.

Единственная проблема – это Internet Explorer, который требует более старой версии спецификаций. Их можно найти здесь .

Также я бы посоветовала использовать для контейнера свойство -webkit-overflow-scrolling: touch, чтобы добавить поддержку iOS-устройств.

Заключение

CSS Scroll Snap помогла мне сэкономить часы работы. Попробуйте реализовать подобное решение с помощью JavaScript. Тогда вы поймете, что именно я имею в виду.

Пожалуйста, оставьте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!

Источник

Scroll Snap Bug (Chrome на Mac) — позволяет прокручивать вверх в пустоту HTML

Пытаюсь понять, ошибка ли это в Chrome или в моем коде. С приведенным ниже кодом, когда я прокручиваю вниз, он делает то, что я хочу, но когда я прокручиваю вверх, он позволяет мне прокручивать так высоко, как я хочу, без того, чтобы тело щелкало назад. Я применил привязку прокрутки к html, потому что она не работает в Chrome, Если на теле.

Можете ли вы, ребята, повторить это, и если да, то есть ли у вас какие-нибудь мысли о том, чтобы предотвратить это?

1 ответ

У меня есть этот div с overflowX:

Я кодирую веб-сайт (с ajaxify.js и history.js), который включает в себя различные по вертикали scroll с шириной и высотой в 100% экрана (на моей домашней странице и на другой странице). Чтобы сделать навигацию немного приятнее, я использую новую функцию CSS snap scroll. Он отлично.

Я до сих пор не выяснил, является ли это ошибкой с chrome или нет, но исправление заключается в управлении поведением overscroll (что можно сделать в Chrome) https://developers.google.com/web/updates/2017/11/overscroll-поведение

Похожие вопросы:

Я заметил странную ошибку в iOS 10 со свойствами CSS scroll-snap . Вот мой css: #springBoard< height: 100%; width: 100%; font-size: 0px; white-space: nowrap; overflow: scroll;.

Последняя версия Chrome, 69, теперь поддерживает scroll-snap-type, но, по-видимому, не очень хорошо. Оригинальный CSS: .carousel < scroll-snap-type: x mandatory; >Использование jQuery для анимации.

у меня есть контейнер с scroll-snap-type: y mandatory; и дочерние элементы с scroll-snap-align: start; . В chrome привязка прокрутки работает так, как и ожидалось. затем я удаляю правило css.

У меня есть этот div с overflowX:

Я кодирую веб-сайт (с ajaxify.js и history.js), который включает в себя различные по вертикали scroll с шириной и высотой в 100% экрана (на моей домашней странице и на другой.

Вот два примера CSS scroll-snaps из csstricks.com Пример #0 работает на Chrome на Windows Пример #3 не работает Почему один из них работает, а другой нет; в чем разница между ними? Пример 1.

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

Я хочу сделать несколько щелчков прокрутки на каждом разделе. Согласно документам, контейнер должен иметь scroll-snap-type включен, и прямой потомок будет привязан к нему. с помощью следующего кода.

Я протестировал CSS scroll-snap на Chrome версии 75.0.3770.100 и Firefox версии 67.0.3 он прекрасно работает в Chrome, но я получаю странные результаты в Firefox. Согласно MDN , Firefox только начал.

Короче говоря, в Chrome (81.0.4044.138) привязка прокрутки по какой-то причине пропускает середину

Источник

CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript

CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript

Чтобы создать прокручиваемый контейнер, нужно настроить отображение содержимого — его не должно быть видно за пределами блока. Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:

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

Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:

Простой прокручиваемый контейнер

Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов.

Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap.

Настройка направления и строгости привязки

Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity).

С направлением всё просто:

• горизонтальная прокрутка — x или ключевое слово inline:
• вертикальная прокрутка — y или ключевое слово block;
• привязка в обоих направлениях — both.

Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:

• none — нет привязки к точке;
• mandatory — обязательное смещение прокрутки к указанной точке;
• proximity — смещение происходит только в тех ситуациях, когда область видимости находится близко к точке привязки. Степень близости браузер определяет самостоятельно.

Главный плюс mandatory — предсказуемость. Вы знаете, что браузер точно сместит область видимости к заданной точке. Главный минус — негибкость. Например, если содержимое при вертикальной прокрутке слишком большое по высоте, то пользователи окажутся в неприятной ситуации — они просто не смогут переместиться к определённому месту, браузер будет сразу перекидывать их к точке привязки.

Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера. Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже.

Изменение точек привязки

Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end.

Чтобы было проще понять разницу, посмотрите на этот пример:

У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента.

При горизонтальной прокрутке привязка работает аналогичным образом. Start в таком случае — левый край контейнера, end — правый край.

Управление прокруткой

Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. Принимает два значения:

• normal — привязка происходит только тогда, когда пользователь прекращает прокрутку, отдельные точки привязки могут быть пропущены;
• always — контейнер останавливается на каждой точке привязке, прежде чем пользователь сможет скроллить дальше.

Значение по умолчанию — normal. Но если вы хотите исключить вероятность того, что пользователь пролистнёт важный элемент, установите значение always.

Настройка внутреннего отступа контейнера

Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. Вместо сокращённой записи можно использовать более конкретную: scroll-padding-top/right/bottom/left.

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

Ещё одно полезное применение — если внутри контейнера есть фиксированный блок. Отступ поможет избавиться от перекрывания содержимого.

Настройка внешнего отступа элемента

Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. Вместо сокращённой записи можно использовать более конкретную: scroll-margin-top/right/bottom/left.

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

Поддержка в браузерах:

В последних версиях популярных браузеров полная поддержка. В Internet Explorer 10 и 11 — частичная.

Актуальность проверяйте на сайте Can I Use.

Узнать больше:

Ещё интересные материалы про CSS и фронтенд:

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации

Источник

Практика CSS Scroll Snapping

Спецификация CSS Scroll Snap позволяет привязывать положение прокрутки к определённым элементам или местоположению после того, как пользователь прокрутил страницу или элемент. Это отличный способ для реализации следующих решений:

Браузерная поддержка и базовое использование

С тех пор, как CSS Scroll Snap был представлен в 2016 году, поддержка браузерами существенно улучшилась. К 2018 году Google Chrome (69+), Firefox, Edge, и Safari поддерживали какую-либо версию этого модуля. Согласно CanIUse, на данный момент технология поддерживается всеми современными браузерами.

Примечание от переводчика
Работоспособность приведённых в статье примеров CodePen проверена в мобильных браузерах Firefox и Chrome Canary (в Chrome Stable некоторые еще не сработали)

Использование Scroll Snapping заключается в установке свойства scroll-snap-type для элемента-контейнера и свойства scroll-snap-align для дочерних элементов. Прокрутка элемента-контейнера осуществляться с привязкой к дочерним элементам, которые вы определили. В этом самом простом случае это будет выглядеть следующим образом:

Данный способ отличается от первой версии спецификации, которая позволяла вам устанавливать точки привязки вручную, используя ключевое слово repeat .

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

Вы можете использовать оба этих метода (если ваш макет позволяет это) для поддержки старых версий браузеров:

Ещё более гибкий вариант – использовать новый синтаксис, а для браузеров, которые его не поддерживают, использовать полифилл. Именно этот способ я использую в примерах ниже.

Свойства контейнера

Как и в случае с любым другим свойством, неплохо бы познакомиться со значениями, которые оно принимает. Свойства из спецификации » scroll snap » применяются как к родителю, так и к дочерним элементам, с определёнными значениями для каждого. Подобно тому, как в Flexbox или CSS Grid родитель становится «flex-» или «grid-» контейнером, можно сказать, что здесь родитель становится scroll-контейнером.

Далее представлены свойства и значения для родительского контейнера и описание принципа их работы.

scroll-snap-type: «mandatory» vs «proximity»

Значение » mandatory » определяет поведение, при котором всякий раз, когда пользователь прекращает прокрутку, браузер должен возвращать её к точке привязки.

Значение » proximity » менее строгое – оно означает, что браузер может возвращаться к точке привязки, если ему это покажется уместным. Из моего опыта, если задано это значение, срабатывание происходит, если прокрутка остановилась в пределах нескольких сотен пикселей от точки привязки.

Используя данное свойство в своей работе, я обнаружил, что значение » mandatory » делает работу интерфейса более последовательной и предсказуемой, но как говорится в спецификации, оно также может быть достаточно опасным. Представьте ситуацию, в которой элемент внутри прокручиваемого контейнера по высоте больше области видимости:

Если для контейнера задано scroll-snap-type: mandatory , он всегда будет привязан либо к верху данного элемента, либо к верху элемента, расположенного ниже, делая невозможным зафиксировать прокрутку в середине высокого элемента.

scroll-padding

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

Это может быть полезно, если в вашем макете есть элементы, которые могут мешать содержимому, например фиксированный заголовок.

Свойства дочерних элементов

Теперь давайте перейдём к свойствам дочерних элементов

scroll-snap-align

Данное свойство позволяет указать, какая сторона элемента должна прижиматься к контейнеру. У свойства есть три возможных значения: » start «, » center » и » end «.

Значения определяются относительно направления прокрутки. Если вы прокручиваете элемент по вертикали, » start » подразумевает верхний край элемента, если по горизонтали – левый. Значения » center » и » end » работают по тому же принципу. Для каждого направления прокрутки можно устанавливать своё значение, разделив их пробелом.

scroll-snap-stop: «normal» vs «always»

По умолчанию, привязка прокрутки происходит только тогда, когда пользователь прекращает прокрутку. Это значит, что за время прокрутки некоторые точки привязки потенциально могут быть пропущены.

Это поведение можно изменить, задав любому дочернему элементу свойство » scroll-snap-stop: always «. Это заставляет прокручиваемый контейнер остановиться на этом элементе, прежде чем пользователь сможет продолжить скролить.

Давайте рассмотрим несколько примеров использования технологии «Scroll Snap».

Пример 1: Вертикальный список

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

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

Пример 2: Горизонтальный слайдер

Чтобы сделать горизонтальный слайдер, мы говорим контейнеру привязываться к элементам при прокрутке по оси X. Дополнительно используем свойство » scroll-padding «, чтобы убедиться, что дочерние элементы привязаны к центру контейнера.

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

Пример 3: Вертикальная прокрутка полноэкранных блоков

Мы можем установить точки привязки непосредственно на элементе:

Затем мы задаем каждому блоку размер области видимости и определяем точку привязки по верхнему краю блока:

Пример 4: Горизонтальная прокрутка полноэкранных блоков

Здесь используется та же концепция, что и в версии с вертикальной прокруткой, но с установкой точек привязки на оси X.

Пример 5: Двухмерная сетка изображений

Привязка прокрутки (scroll snapping) может работать в двух измерениях одновременно. И снова-таки, мы можем установить непосредственно на элементе:

Затем мы определяем левый верхний угол каждой плитки как точку привязки:

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

Связывать с прокруткой – опасное занятие. Поскольку это один из основных способов взаимодействия с приложением, любое изменение этого поведения может вызывать раздражение – термин «scrolljacking» используется для обозначения подобного рода явлений.

Достоинством реализованного в CSS управления привязкой прокрутки является то, что вы не получаете прямой контроль над позицией прокрутки. Вместо этого, вы просто даёте браузеру список позиций для привязки таким образом, который соответствует платформе, способу ввода и пользовательским предпочтениям. Это значит, что поведение прокрутки, которое вы создаёте, на любой платформе будет ощущаться как нативное (то есть, с использованием тех же анимаций и т.д).

Считаю это ключевым преимуществом привязки прокрутки, реализованной с помощью CSS, перед JavaScript библиотеками, предлагающими схожую функциональность.

По моим личным ощущениям, это работает достаточно хорошо, особенно на мобильных устройствах. Возможно, из-за того, что «scroll snapping» уже является частью встроенного в мобильные платформы UI. Вспомните главный экран на iOS и Android устройствах – это, по сути, горизонтальный слайдер с точками привязки. Взаимодействие в Chrome на Android особенно приятно, потому что воспринимается как обычная прокрутка, но область видимости всегда останавливается на точке привязки:

Для реализации такого поведения, определённо нужно проводить некоторые математические вычисления. Благодаря CSS Scroll Snapping мы добиваемся такого же результата без этого.

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

Заключение

Если относиться к этому ответственно, привязка прокрутки может стать полезным инструментом. Точки привязки CSS позволяют вам включиться во встроенный в браузер процесс работы с прокруткой без ущерба плавности интерфейса. С появлением JavaScript API (потенциально на горизонте) они станут еще более мощными.

Источник