Css scroll: scroll-behavior — CSS | MDN

Css
9 Май, 2021
0

Содержание

Создание стилей панелей прокрутки с помощью CSS

Введение

В сентябре 2018 г. комитет W3C в документе CSS Scrollbars определил спецификации настройки внешнего вида панелей прокрутки с помощью CSS.

В 2020 году 96% пользователей Интернета запускали браузеры, поддерживающие стили панелей прокрутки CSS. Однако, чтобы реализовать поддержку Blink, WebKit и браузеров Firefox, нужно написать два набора правил CSS.

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

Предварительные требования

Для понимания этой статьи вам потребуется:

Создание стилей панелей прокрутки для Chrome, Edge и Safari

Для создания стилей панелей прокрутки для Chrome, Edge и Safari требуется псевдоэлемент -webkit-scrollbar с префиксом поставщика.

Вот пример с использованием псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-track и ::webkit-scrollbar-thumb:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

Данный код работает с последними версиями браузеров Chrome, Edge и Safari.

К сожалению, данная спецификация была формально отменена W3C, и, вероятно, со временем ее перестанут использовать.

Создание стилей панелей прокрутки в Firefox

Для создания стилей панелей прокрутки для Firefox используются новые CSS Scrollbars.

В этом примере используются свойства scrollbar-width и scrollbar-color:

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

Эта спецификация похожа на спецификацию -webkit-scrollbar способом контроля цвета панели прокрутки. Однако в настоящее время отсутствует поддержка заполнения и округления курсора.

Создание готовых к будущему стилей панели прокрутки

Вы можете писать код CSS так, чтобы он поддерживал и спецификацию -webkit-scrollbar, и спецификацию CSS Scrollbars

В этом примере используются свойства scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Браузеры Blink и WebKit игнорируют правила, которые они не распознают, и применяют правила

-webkit-scrollbar. Браузеры Firefox игнорируют правила, которые они не распознают, и применяют правила CSS Scrollbars. Когда в браузерах Blink и WebKit полностью перестанет использоваться спецификация -webkit-scrollbar, они постепенно перейдут на новую спецификацию CSS Scrollbars.

Заключение

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

Также существует возможность моделирования панели прокрутки. Для этого нужно скрыть панель прокрутки по умолчанию и использовать JavaScript для определения высоты и положения прокрутки. Однако эти подходы связаны с ограничениями в таких случаях, как инерционная прокрутка (например, замедление движения при прокрутке с использованием трекпада).

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

синтаксис, применение свойств и поддержка браузерами

От автора: веб-разработчикам сложно гарантировать хороший UX при прокручивании страницы, но, к счастью, CSS модуль «Scroll Snap» должен помочь в этом. Модуль принудительно устанавливает конечную позицию скрола после выполнения прокрутки. Помимо всего прочего, в модуле есть функции управления, такие как панорамирование в сочетании с «привязками». Модуль CSS Scroll Snap обеспечивает выравнивание контента внутри контейнера со скролом. Недавно W3C выпустили Scroll Snap как Candidate Recommendation с хорошо продуманными реализациями и примерами, а также с обновленным синтаксисом. Давайте разбираться.

Терминология Scroll Snap

Чтобы понять мощь Scroll Snap и принцип его работы, необходимо знать его терминологию. Это также поможет избежать недопонимания при использовании терминов в этой статье.

Scroll snap проходит внутри snapport или scrollport. Оба термина значат одно и то же, их можно заменить на контейнер скрола. Это область, в которой проходит scroll snap, как видно на рисунке выше (внешняя прерывистая рамка). Ее цель – принудительно установить позицию завершения для scrollport внутри контейнера после завершения операции.

Каждый элемент snapport называется snap area и является объектом (-ми), которые нам и нужны. В каждой snap area есть snap position, которое также определяется через snap position контейнера и представляет собой линию из красных точек на рисунке выше.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы разобрались в терминах, теперь давайте рассмотрим пару примеров и узнаем, как они работают в реальной жизни. Более подробно о случаях использования можно узнать в примере W3C с фотогалереей и демо, а также по ссылке. Также обновилась спецификация Modules August 2017 CR. В :target должны заложить довольно интересное поведение.

Демо Scroll Snap

На момент написания статьи демо ниже лучше всего просматривать в Safari 11. Другие браузеры не полностью поддерживают новый синтаксис, несмотря на данные с caniuse и личные тесты.

Пример ниже показывает только минимум необходимых свойств для включения CSS Scroll Snap. В нем нет полифилов, мне не удалось найти рабочий polyfill, который бы работал с последним опубликованным синтаксисом. Также любой скрол контейнер потребует еще одно известное CSS свойство overflow.

Демо выше использует ось У в качестве snap position. Однако можно и использовать ось Х. Если у вас не установлен Safari 11, ниже представлена запись демо.

Панели аккуратно переключаются. Обратите внимание, на странице есть определенная точка, в которой импульс прокрутки берет верх и перепрыгивает к следующему блоку. Быстро, да? Второе демо, где ось У используется для показа галереи изображений.

По мере прокрутки по горизонтали импульс достигает точки невозврата scrollport и snap area, независимо от размера изображения.

Свойства и синтаксис scroll snap

Перейдем к объяснению свойств, их синтаксиса и значений.

В текущей спецификации scroll snap всего 4 свойства, и каждое играет важную роль. Эти 4 свойства…

scroll-snap-type

scroll-snap-align

scroll-padding

scroll-margin

Разберем каждое свойство, как оно работает, где определяется и какие значения принимает.

scroll-snap-type

Это свойство определяет тип контейнера — scroll snap container или snapport – строгость переключения, а также используемую ось. Если строгое значение не задано, по умолчанию передается proximity. Свойство также принимает другое значение, помогающее в определении snap axis. Можно передать 2 значения (например, scroll-snap-type: y mandatory). В таком случае snap-type касается только оси У и имеет значение mandatory.

Scroll Snap Axis: x, y, block, inline или both

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

x: скрол контейнер фиксирует snap position только по горизонтальной оси

y: скрол контейнер фиксирует snap position только по вертикальной оси

block: скрол контейнер фиксирует snap position только по оси блока

inline: скрол контейнер фиксирует snap position только по инлайн оси

both: скрол контейнер фиксирует snap position по обеим осям независимо (потенциально привязываясь к разным элементам каждой оси)

Scroll Snap Strictness: none, proximity и mandatory

none: если задан на скрол контейнере, то скрол контейнер не переключается

proximity: если задан на скрол контейнере, то скрол контейнер должен быть привязан к snap position, в которой нет активных операций прокрутки. Если доступная snap position существует, тогда скрол контейнер должен переключиться по завершении прокрутки (если позиции нет, переключения не будет)

mandatory: если задан на скрол контейнере, скрол контейнер может привязываться к snap position в момент завершения прокрутки

scroll-snap-align

Свойство scroll-snap-align задает snap position контейнера, как выравнивание его snap area (как объект выравнивания) внутри snapport контейнера (как контейнер выравнивания). Два значения определяют выравнивание привязки по инлайн оси и блоковой оси соответственно. Если задано одно значение, второе значение по умолчанию дублируется. Принимаемые значения none, center, start и end.

Это свойство определяется для дочерних элементов скрол контейнера и принимает 2 значения. Первое значение – ось Х, второе – ось У. Например, scroll-snap-align: start center.

None: такой блок не определяет snap position по заданной оси.

Start: начальное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси

End: конечное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси

Center: центральное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси

scroll-padding

Значения scroll-padding ведут себя как сдвиги. Когда они определены, у контейнера уменьшается прокручиваемая область, считающаяся видимой. Свойство не влияет на макет, область скрола, начальное положение и на видимость элемента. Существует 2 формы: первая похожа на стандартное свойство padding, и длинная версия scroll-padding-top и scroll-padding-bottom, например.

scroll-margin

Эти значения представляют собой внешние выражения, объявленные для скрол контейнера, которые определяют snap area, используемую для привязки элементов к snapport. Работает как свойство margin, как сокращенная так и длинная версия scroll-margin-top и scroll-margin-bottom.

Заключительные мысли

Последние обновления в editor’s draft привели к ухудшению поддержки, на данный момент, как я уже говорил, нет рабочих полифилов. Есть вероятность того, что свойство scroll-snap-stop будет удалено в CR. Я также выяснил, что min-height сейчас не работает, когда задано на scroll snap контейнере. Может, есть другие свойства со схожим действием. Если знаете такие, оставляйте их в комментариях.

Это беглый обзор CSS Scroll snap. Стоит оно того? Будет он вам полезен? Или его нужно поместить в самые темные уголки галактики, где его никто не найдет? Оставляйте ответы в комментариях. И как всегда, хорошо покодить!

Автор: Dennis Gaebel

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

[Перевод] Практика использования спецификации CSS Scroll Snap

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

Здесь я хочу раскрыть основы практического использования этой спецификации. Я сам только недавно разобрался с CSS Scroll Snap, поэтому рассказывать всё это буду, так сказать, «по горячим следам».

Зачем использовать CSS Scroll Snap?

С ростом популярности мобильных телефонов и планшетов растёт и необходимость разработки компонентов веб-страниц, прокручивать которые удобно, пользуясь сенсорными экранами, и, в частности, жестами, известными как «свайпы». Возьмём, например, компонент, реализующий галерею изображений. Пользователь может легко, пользуясь «свайпами», направленными влево или вправо, листать галерею, изображения в которой расположены горизонтально. С таким компонентом удобнее работать, чем с компонентом, содержимое которого нужно прокручивать по вертикали.
Вертикальная организация содержимого не всегда удобна при работе со страницами на устройствах, оснащённых сенсорными экранами. С содержимым, организованным горизонтально, на таких устройствах работать удобнее

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

Основы работы с контейнерами, поддерживающими прокрутку

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

Использование свойства из группы свойств overflow со значением, отличающимся от visible.
Применение некоего способа вывода элементов в контейнере, позволяющего расположить их рядом друг с другом (inline-элементы).

Рассмотрим пример.

Вот HTML-код:

 
  Item 1
  Item 2
  Item 3
  Item 4
  Item 5

Вот стили:

.section {
  white-space: nowrap;
  overflow-x: auto;
}

Популярным CSS-решением для размещения элементов в контейнере многие годы было свойство white-space: nowrap. В наши дни без этого, к счастью, можно обойтись, воспользовавшись свойством display: flex:

.section {
  display: flex;
  overflow-x: auto;
}

Контейнер, поддерживающий прокрутку элементов

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

Проблема контейнеров, поддерживающих прокрутку содержимого

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

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

Работа с обычным контейнером, поддерживающим прокрутку

Как видите, каждый элемент приходится буквально «вести» на его место, не отрывая палец от экрана. Это — не «свайп» и это очень неудобно с точки зрения пользователя. Но, используя возможности CSS Scroll Snap, мы можем решить эту проблему, просто описав точки привязки (snap point), которые упростят горизонтальную или вертикальную прокрутку содержимого страницы.

Знакомство с CSS Scroll Snap

Для того чтобы воспользоваться возможностями CSS Scroll Snap дочерние элементы должны выводиться внутри контейнера в inline-режиме. Сделать это можно с использованием одного из вышеописанных методов. Я использую для этих целей Flexbox-макет.

Вот HTML-код:


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5

Вот CSS-код:

.section {
  display: flex;
  overflow-x: auto;
}

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

Сначала надо добавить свойство

scroll-snap-type к контейнеру, поддерживающему прокрутку. В нашем примере это — элемент с классом section. Затем нужно добавить свойство scroll-snap-align к дочерним элементам (класс section__item).

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section__item {
  scroll-snap-align: start;
}

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

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

Вот как это выглядит.

Элементы привязаны к началу контейнера

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

▍Свойство scroll-snap-type

Свойство scroll-snap-type, в соответствии со спецификацией, позволяет указать на то, что элемент является snap-контейнером. Его значения позволяют задать то, насколько жёстко осуществляется привязка содержимого этого контейнера при прокрутке, а так же то, прокрутка по каким осям принимается во внимание.

▍Оси контейнера

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

/* Горизонтальная прокрутка */
.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
}

/* Вертикальная прокрутка */
.section {
  height: 250px;
  overflow-y: auto;
  scroll-snap-type: y;
}

Горизонтальная прокрутка и вертикальная прокрутка

▍Настройка жёсткости привязки

Мы, настраивая контейнер, можем задать не только направление прокрутки, но и то, насколько жёстко содержимое должно быть связано с точками привязки. Сделать это можно с помощью значений mandatory и proximity свойства scroll-snap-type.

Ключевое слово mandatory означает, что браузер обязательно должен привязать элемент к точке привязки. Представим, что свойство scroll-snap-align установлено в значение start

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

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

Элементы жёстко привязаны к началу контейнера

Вот CSS-код:

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.section__item {
  scroll-snap-align: start;
}

Здесь можно найти видео к этому примеру.
Прокрутка с привязкой

А вот — интерактивный вариант этого примера.

Работа с интерактивным вариантом примера

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

А вот если тут используется значение proximity, то элементы будут вести себя уже немного свободнее, привязка работает не так жёстко. Обратите внимание на то, что значение proximity используется в свойстве scroll-snap-type по умолчанию. Я показываю тут последствия его явного применения лишь ради того, чтобы сделать изложение понятнее.

Элементы привязаны к началу контейнера менее жёстко

.section {
  display: flex;
  overflow-x: auto;
  /* proximity - это значение, используемое по умолчанию, я описываю его лишь для того чтобы сделать изложение понятнее */
  scroll-snap-type: x proximity;
}

Вот видеодемонстрация.
Последствия использования значения proximity

▍Свойство scroll-snap-align

При настройке дочерних элементов контейнера, поддерживающего прокрутку, нужно указать то, к какому месту контейнера привязываются эти элементы. Делается это путём настройки свойства scroll-snap-align, которое поддерживает значения start (начало), center (центр) и end (конец).

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

Значения свойства scroll-snap-align и их влияние на содержимое, расположенное в контейнере по горизонтали

Если содержимое в контейнере ориентировано вертикально, это значит, что точки привязки, задаваемые значениями start, center и end, тоже расположены по вертикали.

Значения свойства scroll-snap-align и их влияние на содержимое, расположенное в контейнере по вертикали

Ниже приведено несколько видеопримеров.

▍Привязка содержимого к началу контейнера

При установке свойства scroll-snap-align в значение start содержимое контейнера привязывается к его началу.
Привязка содержимого к началу контейнера

▍Привязка содержимого к центру контейнера

При установке свойства scroll-snap-align в значение center содержимое контейнера привязывается к его центру.
Привязка содержимого к центру контейнера

▍Привязка содержимого к концу контейнера

При установке свойства scroll-snap-align в значение end содержимое контейнера привязывается к его концу.
Привязка содержимого к концу контейнера

▍Использование свойства scroll-snap-stop

Иногда нужно сделать так, чтобы пользователь, прокручивающий список элементов, не пропустил бы случайно какой-нибудь очень важный элемент. Если список прокручивают слишком быстро, то нечто подобное вполне может случиться. Решить вышеописанную задачу можно, прибегнув к свойству scroll-snap-stop.

Вот стили:

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

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

По умолчанию свойство scroll-snap-stop установлено в значение normal. Для принудительной привязки элементов это свойство можно установить в значение always. Благодаря этому браузер будет останавливать прокрутку каждый раз, когда очередной элемент достигает точки привязки.

Вот соответствующие стили:

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Вот видеодемонстрация.
Браузер не позволяет пропускать элементы

В результате пользователь, выполнив одно движение, может прокрутить список лишь на один элемент. Благодаря этому можно предотвратить пропуск важных элементов. При таком подходе каждая точка привязки будет напоминать знак «STOP».

Точки привязки — это, при использовании значения always, то же самое, что и знаки «STOP»

Здесь можно найти интерактивный пример, позволяющий поэкспериментировать со свойством scroll-snap-stop.

Эксперименты со свойством scroll-snap-stop

▍Внутренние отступы и свойство scroll-padding

Сокращённое свойство scroll-padding позволяет устанавливать внутренние отступы, воздействующие на прокрутку содержимого в контейнере. Оно похоже на обычное свойство padding. На следующем рисунке показаны последствия создания внутреннего левого отступа шириной в 50px. Благодаря этому дочерние элементы будут привязаны к точке, отстоящей от края контейнера на 50 пикселей.

Вот стили, соответствующие сценарию горизонтальной прокрутки:

.section {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 0 0 50px;
}

Использование свойства scroll-padding при реализации горизонтальной прокрутки

То же самое применимо и к контейнерам с вертикальной прокруткой:

.section {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px 0 0 0;
}

Использование свойства scroll-padding при реализации вертикальной прокрутки

▍Внешние отступы и свойство scroll-margin

Сокращённое свойство scroll-margin позволяет настраивать внешние отступы дочерних элементов контейнера, учитываемые при их прокрутке. Например, как показано на следующем рисунке, добавив к элементу .item-2 свойство scroll-margin-left: 20px, мы можем сместить позицию привязки элемента на 20 пикселей.
Использование свойства scroll-margin

В результате прокрутка остановится в тот момент, когда до края контейнера будет 20 пикселей. А если пользователь продолжит прокручивать список и дойдёт до элемента .item-3, то край этого элемента будет привязан к началу контейнера, так как для этого элемента свойство scroll-margin не задано.

Способы использования CSS Scroll Snap

▍Список изображений

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

Вот стили:

.images-list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x;
  gap: 1rem;
  -webkit-overflow-scrolling: touch; /* Важно для iOS-устройств */
}

.images-list img {
  scroll-snap-align: start;
}

Обратите внимание на то, что в качестве значения свойства scroll-snap-type используется x. Жёсткость привязки будет, по умолчанию, установлена в значение proximity.

Вот интерактивный вариант этого примера.

Эксперименты со списком изображений

▍Список друзей

Список друзей — это ещё один отличный способ использования CSS Scroll Snap. Нижеприведённый пример взят с Facebook (то есть — перед нами — реальный пример).
Список друзей

Вот CSS-код к этому примеру:

.list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  scroll-padding: 48px;
  padding-bottom: 32px;
  -webkit-overflow-scrolling: touch;
}

.list-item {
  scroll-snap-align: start;
}

Обратите внимание на то, что при настройке контейнера используется свойство padding-bottom: 32px. Сделано это для того чтобы дать дополнительное пространство для вывода тени, задаваемой свойством box-shadow.
Без использования свойства padding-bottom тень выводится не полностью

▍Список аватаров

В данном примере нас интересует значение center, задаваемое свойству scroll-snap-align дочерних элементов контейнера.
Список аватаров

Вот стили:

.list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.list-item {
  scroll-snap-align: center;
}

Этот подход хорош для тех случаев, когда нужно, чтобы аватар располагался бы по центру контейнера.

Здесь с этим примером можно поэкспериментировать.

Эксперименты со списком аватаров

▍Список разделов, занимающих всю доступную высоту области просмотра страницы

Использование спецификации CSS Scroll Snap может пригодиться и при реализации сценариев вертикальной прокрутки элементов. Например — при организации работы с элементами, занимающими всю высоту области просмотра страницы.
Элементы, занимающие всю высоту области просмотра страницы

Вот разметка к этому примеру:

Вот стили:

main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

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

▍Значения inline и block свойства scroll-snap-type

Полагаю, стоит сказать о том, что при настройке свойства scroll-snap-type можно использовать логические CSS-значения inline и block. Вот пример:

main {
  scroll-snap-type: inline mandatory;
}

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

Подробнее о логических CSS-свойствах можно почитать здесь.

▍Доступность

При применении спецификации CSS Scroll Snap стоит помнить о доступности контента. Вот пример плохого использования этой спецификации. Здесь настройки прокрутки мешают пользователю свободно читать выводимые материалы.

Вот CSS-код:

.wrapper {
  scroll-snap-type: y mandatory;
}

h3 {
  scroll-snap-align: start;
}

Прокрутить текст так, как показано справа, при таком подходе нельзя. Дело в том, что при прокрутке осуществляется привязка заголовков к началу контейнера

Можете испытать это сами.

Неудачное использование CSS Scroll Snap

Пожалуйста, постарайтесь так не делать!

Пользуетесь ли вы возможностями CSS Scroll Snap в своих проектах?

Scroll Snap Points — слайдеры на чистом CSS

В этом обзоре мы с вами посмотрим на очередной CSS модуль — Scroll Snap Points, который позволяет без JavaScript реализовать слайдеры и карусели любого размера (в том числе на весь экран). Работают пока хреново, но зато на CSS. Слайдеры на чистом CSS, Карл!

Как это ни странно в W3C черновик модуля предложили ребята из Microsoft, видимо с выходом Edge и Windows 10 решили таки пойти в web-меинстрим и участвовать в развитии. Кстати, забегая вперед, в последних браузерах от компании из Редмонда этот модуль уже даже поддерживается.

Почему слайдеры?

Поговаривают, что с точки зрения UX скролить сквозь контент — это очень природно и удобно. Даже статьи разоблачительные пишут о том, что пользователи действительно любят это дело. Что в общем-то и немудренно, учитывая богатую и долгую историю такого изобретения как скроллбар.

Эволюция скроллбара

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

Coverflow на iPhone 4

Да и просто слайдеры теперь везде в интернетах, а тут аж без JavaScript.

Примеры CSS Scroll Snap Points на Codepen

Для наглядной демонстрации можно посмотреть вот этот набросок на Codepen, в котором я реализовал два слайдера: горизонтальный и вертикальный. Работает очень плавно, hardware-ускорение включается даже на Intel Iris.

See the Pen CSS Scroll Snap Points by Alexander Goncharov (@websanya) on CodePen.

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

С помощью CSS Scroll Snap Points можно и такое. Пример ниже.

See the Pen Fullscreen CSS Scroll Snap Points by Alexander Goncharov (@websanya) on CodePen.

Поддержка Scroll Snap Points браузерами

Поддерживается этот модуль уже почти всеми браузерами, но вот в Chrome и ему подобных пока никак, поэтому процент не велик.

Firefox 39+, без префикса
Safari 9+ и iOS 9+, с префиксом -webkit-
Internet Explorer 10+ и Edge, с префиксом -ms-
Google Chrome и Chromium-основанные браузеры, не поддерживается

CSS Scroll Snap Points на caniuse.com

Такие модули, как CSS Scroll Snap Points имеют очень нишевое применение, но что-то мне подсказывает, что если Chrome его вдруг поддержит, то применять будут везде и непонятно на хрена.

Как Flexbox.

Плавный скроллинг при помощи CSS

В прошлом году, создавая страницу продукта FilePond, я наткнулся на API scrollIntoView. Это удобный метод указывает браузеру прокрутить элемент в окне просмотра.

Эта статья была изначально опубликована в моем личном блоге

API scrollIntoView можно назначить анимацию прокручиваемой части, добавив свойство поведения в объект scrollIntoViewOption.

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

В настоящее время scrollIntoViewOptions работает только в Firefox и Chrome.

Я разместил сообщение в Твиттере .

Затем Hans Spieß написал, что это также можно сделать с помощью CSS, ЧТО !?

Оказывается, есть свойство CSS scroll-behavior, которому нужно задать параметр smooth. Похоже на awesome: yes-please. Если мы хотим установить плавную прокрутку контейнеру, мы просто можем установить свойство scroll-behavior и все готово.

Вот мое новое демо, где я использую только лишь CSS

Прежде чем мы начнем сходить с ума и пихать это на все сайты давайте подумаем о нескольких моментах.

Значение расстояния прокрутки

Если есть большое расстояние для перемещения, Firefox пропустит контент, чтобы ограничить время прокрутки, в то время как Chrome, прокручиваясь на максимальной скорости просто займет время, чтобы добраться до цели.

Мы могли бы использовать Smart CSS для обнаружения длинных страниц и условно применить стиль плавной прокрутки.

Легкость просмотра

Пользователи просто могут заскучать при такой анимации и захотеть спать. Решение здесь будет такое — обернуть свойство CSS в prefers-reduced-motion медиа-запрос. Но, к сожалению, Chrome не поддерживает это свойство. Safari поддерживает, но Safari не поддерживает плавную прокрутку.

Заключение

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

Перевод статьи: CSS Smooth Scrolling

CSS свойство overflow-y

Пример

Показать различные значения свойства overflow-y:

div.ex1 {
переполнение-y: прокрутка;
}

div.ex2 {
overflow-y: скрыто;
}

div.ex3 {
overflow-y: авто;
}

div.ex4 {
overflow-y: visible;
}

Попробуй сам »

Определение и использование

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

Совет: Используйте свойство overflow-x для определения обрезки по левому и правому краю.

Значение по умолчанию:	видимые
Унаследовано:	нет
Анимируемые:	нет. Прочитать про animatable
Версия:	CSS3
Синтаксис JavaScript:	объект .style.overflowY = «прокрутка» Попытайся

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -ms-, укажите первую версию, которая работала с префикс.

Объект
переполнение	4.0	9,0 8,0 -мс-	1,5	3,0	9,5

Синтаксис CSS

Значения собственности

Значение	Описание	Играй
видимый	Контент не обрезан, и он может отображаться за пределами поля контента.Это значение по умолчанию	Играй »
скрыто	Контент обрезан — и механизма прокрутки нет	Играй »
свиток	Контент обрезан, и предусмотрен механизм прокрутки	Играй »
авто	Должен быть предусмотрен механизм прокрутки для переполненных ящиков	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию.Читать про начальные	Играй »
унаследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Учебник

CSS: переполнение CSS

Ссылка на HTML DOM: свойство overflowY

Свойство поведения прокрутки CSS

Пример

Добавьте к документу эффект плавной прокрутки:

html {
поведение прокрутки: плавно;
}

Попробуй сам »

Определение и использование

Свойство scroll-behavior указывает следует ли плавно анимировать положение прокрутки вместо прямого прыжка, когда пользователь нажимает ссылку в прокручиваемом поле.

Значение по умолчанию:	авто
Унаследовано:	нет
Анимируемые:	нет. Прочитать про animatable
Версия:	Модуль просмотра CSSOM (рабочий проект)
Синтаксис JavaScript:	объект .style.scrollBehavior = «smooth» Попытайся

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
поведение прокрутки	61,0	79,0	36,0	14,0	48,0

Синтаксис CSS

поведение прокрутки: авто | гладкое | начальное | наследование;

Значения собственности

Значение	Описание
авто	Позволяет осуществлять «эффект прокрутки» прямого перехода между элементами в поле прокрутки.Это значение по умолчанию
гладкая	Позволяет плавно анимировать «эффект прокрутки» между элементами в поле прокрутки.
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальные
унаследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

поведение прокрутки | CSS-уловки

Свойство scroll-behavior в CSS позволяет нам определять, перескакивает ли место прокрутки браузера в новое место или плавно анимирует переход, когда пользователь щелкает ссылку, нацеленную на закрепленную позицию в поле прокрутки.

  html {
  поведение прокрутки: плавное;
}

Более глубокое объяснение

Подождите, подождите, о чем мы говорим? Это элемент, содержимое которого выходит за его границы.

См. Окно прокрутки пера от CSS-Tricks (@ css-tricks) на CodePen.

Обратите внимание, как прямоугольник в приведенной выше демонстрации имеет фиксированную высоту 200 пикселей ? Любое содержимое, превышающее эту высоту, находится за пределами поля, и мы добавили overflow-y: scroll , чтобы сделать это дополнительное содержимое доступным с вертикальной прокруткой.Вот что мы подразумеваем под полем прокрутки.

Теперь предположим, что мы добавляем навигацию в верхнюю часть окна, где каждая ссылка нацелена на три раздела контента:

См. Поле Pen Scrolling Box w / Nav от CSS-Tricks (@ css-tricks) на CodePen.

Каждая ссылка ведет пользователя непосредственно к различным разделам содержимого внутри поля прокрутки. По умолчанию переход между ними является резким скачком.

По умолчанию переход между содержимым резкий и внезапный.

Такой прыжок может раздражать.Вот тут-то и появляется scroll-behavior , которое позволяет нам установить плавный переход при прокрутке. Подобные вещи используются для причудливого Javascript, но поведение прокрутки даст нам возможность делать это изначально в CSS, как только поддержка браузера улучшится.

Переход между содержимым анимирован плавным переходом.

Синтаксис

  .module {
  поведение прокрутки: [авто | гладкий ];
}

Значения

Свойство scroll-behavior принимает два значения, которые по существу включают и выключают функцию плавной прокрутки.

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

Демо

Следующая демонстрация будет работать только в Chrome 61+, Firefox 36+ и Opera 48+ на момент написания этой статьи.

См. Окно прокрутки пера с `scroll-behavior` от CSS-Tricks (@ css-tricks) на CodePen.

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

Настольный компьютер

Chrome	Firefox	IE	Edge	Safari
61	36	Нет	79	Нет

Мобильный /

900 Android Chrome Android Firefox Android iOS Safari 89 86 81 Нет

Дополнительная информация

Хорошо управляемая прокрутка с помощью CSS Scroll Snap | Веб

Роберт является соавтором Web Fundamentals

Инженер-программист, работающий над Chromium

TL; DR

Функция

CSS Scroll Snap позволяет разработчиков, чтобы создать хорошо управляемую прокрутку, объявив прокрутку привязка позиций.Статьи с разбивкой на страницы и карусели изображений — два часто используемых примеры этого. CSS Scroll Snap предоставляет простой в использовании и согласованный API для разрабатывая эти популярные шаблоны UX, и Chrome обеспечивает высокую точность и быстрая реализация в версии 69.

Фон

Футляр для фиксации прокрутки

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

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

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

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

Пример использования css scroll snap с каруселью изображений. Здесь привязка прокрутки обеспечивает в конце горизонтальной прокрутки изображения. center выравнивается с горизонтальным центром контейнера прокрутки.

История API

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

Chrome, Opera и Safari поставляют последние спецификации вместе с другими основные производители браузеров, планирующие последовать их примеру в ближайшем будущем (Ошибка Firefox, Ошибка Edge).

Это означает, что вы найдете несколько руководств в Интернете, в которых обсуждается старый синтаксис. который в настоящее время все еще реализуется Edge и Firefox.

Основные изменения в спецификации оснастки прокрутки.

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

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

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

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

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

Пример различных выравниваний по горизонтальной оси прокрутки.

Следующие примеры иллюстрируют, как эти концепции могут быть использованы на практике.

Пример — Горизонтальная галерея

Распространенным вариантом использования привязки прокрутки является карусель изображений.Например, чтобы создать горизонтальную карусель изображений, которая привязывается к каждому изображению при прокрутке, мы можно указать контейнер прокрутки, чтобы иметь обязательный тип привязки прокрутки на Горизонтальная ось. установите для каждого изображения значение scroll-snap-align: center , чтобы убедиться, что привязка центрирует изображение внутри карусели.

  <стиль>
#gallery {
  scroll-snap-type: x обязательный;
  переполнение-x: прокрутка;
  дисплей: гибкий;
}

#gallery img {
   прокрутка-привязка-выравнивание: по центру;
}

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

Посмотреть демо | Источник

Пример — пройденная страница продукта

Еще одним распространенным случаем, в котором может быть полезна привязка к прокрутке, являются страницы с несколько логических разделов, которые прокручиваются по вертикали, например, типичный страницу продукта. scroll-snap-type: y приближение; — более естественный вариант для чехлов. так. Это не мешает, когда пользователь прокручивает до середины определенного раздел, но также привязывается и привлекает внимание к новому разделу при прокрутке достаточно близко к нему.

Вот как этого можно достичь:

  <стиль>
статья {
  scroll-snap-type: y близость;
  / * Зарезервировать место для заголовка плюс немного места для подглядывания. * /
  прокрутка сверху: 15vh;
  переполнение-y: прокрутка;
}
раздел {
  / * Начало выравнивания привязки. * /
  прокрутка-привязка-выравнивание: начало;
}
header {
  положение: фиксированное;
  высота: 10vh;
}


<статья>
   Заголовок 
   Раздел первый 
   Раздел второй 
   Раздел третий

Заполнение и поля прокрутки

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

scroll-padding — это новое свойство css, которое можно использовать для настройки эффективного видимая область контейнера прокрутки. Этот регион также известен как привязка и используется при вычислении выравнивания привязки прокрутки. Свойство определяет вставку напротив поля заполнения контейнера прокрутки. В нашем примере 15vh дополнительная вставка был добавлен вверху, что указывает браузеру рассмотреть более низкую позицию, 15vh ниже верхнего края контейнера прокрутки, как его вертикальный начальный край для привязка прокрутки.При привязке начальный край целевого элемента привязки будет покраснетесь с этой новой позицией, оставив место наверху.

scroll-margin определяет исходную величину, используемую для настройки цели привязки эффективное поле, аналогичное тому, как scroll-padding работает с Snap scroll контейнер.

Вы могли заметить, что у этих двух свойств нет слова « snap » в их. Это сделано намеренно, поскольку они фактически изменяют поле для всех соответствующих операции прокрутки, а не просто привязка прокрутки.Например, Chrome берет их необходимо учитывать при вычислении размера страницы для операций прокрутки страниц, таких как как PageDown и PageUp, а также при расчете количества прокрутки для Element.scrollIntoView () операция.

Посмотреть демо | Источник

API прокрутки DOM

Привязка прокрутки происходит после всех операций прокрутки, включая те инициирован сценарием. Когда вы используете такие API, как Element.scrollTo , браузер вычислит предполагаемую позицию прокрутки операции, а затем применит соответствующая логика привязки, чтобы найти окончательное место привязки.Таким образом, есть нет необходимости, чтобы пользовательский сценарий выполнял какие-либо ручные вычисления для привязки.

Плавная прокрутка

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

Поведение при превышении прокрутки

API поведения при превышении прокрутки контролирует, как прокрутка привязана к нескольким элементам, и на нее не влияет прокрутка щелчок.

Предостережения и передовой опыт

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

Используйте CSS.supports для определения функции CSS Scroll Snap. Но избегайте использования , тип скроллинга , который также присутствует в устаревшей спецификации и может быть ненадежным.

  if (CSS.supports ('scroll-snap-align: start')) {
  // использовать css scroll snap
} еще {
  // использовать запасной вариант
}

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

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

Будущие работы

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

CSS Scroll Snap

Как часто вы хотели, чтобы была функция CSS, которая упростила бы создание прокручиваемого контейнера? Привязка прокрутки CSS может это сделать. В первые дни разработки интерфейса я полагался на плагин Javascript для создания компонентов слайдера. Иногда нам нужен простой способ быстро сделать элемент как прокручиваемый контейнер. Мы можем это сделать благодаря оснастке прокрутки CSS.

В этой статье я расскажу вам об основах привязки прокрутки CSS.Что меня порадовало, так это то, что я только что изучил CSS Scroll Snap, поэтому все детали, которые я объясню, будут написаны недавно. Вы готовы? Давайте нырнем!

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

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

Вот основные вещи, которые вам понадобятся для создания прокручиваемого контейнера:

Использование переполнения со значением, отличным от , видимый .
Способ отображения элементов рядом друг с другом (встроенный).

Рассмотрим пример.

  
   Пункт 1 
   Пункт 2 
   Пункт 3 
   Пункт 4 
   Пункт 5

 .раздел {
  белое пространство: nowrap;
  переполнение-x: авто;
}

В течение многих лет использование white-space: nowrap было популярным решением CSS, заставляющим элементы оставаться встроенными. К счастью, мы можем этого избежать и вместо этого использовать Flexbox.

  .section {
  дисплей: гибкий;
  переполнение-x: авто;
}

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

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

Вот как ощущения от предыдущих решений.

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

Давайте посмотрим, как использовать привязку прокрутки CSS.

Чтобы использовать привязку прокрутки к контейнеру, его дочерние элементы должны отображаться встроенными, и это можно сделать с помощью одного из методов, которые я объяснил выше. Я выберу CSS flexbox.

  
   Пункт 1 
   Пункт 2 
   Пункт 3 
   Пункт 4 
   Пункт 5

  .section {
  дисплей: гибкий;
  переполнение-x: авто;
}

При этом нам нужно добавить еще два свойства для работы привязки прокрутки.Куда мы должны их добавить? Хороший вопрос.

Во-первых, нам нужно добавить scroll-snap-type в контейнер для прокрутки. В нашем примере это элемент .section . Затем нам нужно добавить scroll-snap-align к дочерним элементам, которыми являются .section__item .

  .section {
  дисплей: гибкий;
  переполнение-x: авто;
  scroll-snap-type: x обязательный;
}

.section__item {
  прокрутка-привязка-выравнивание: начало;
}

Теперь я знаю твои чувства.Вам может быть интересно узнать о значениях x обязательные и , начинающиеся с . Не волнуйтесь, это суть статьи, и я подробно их объясню.

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

В тот момент я был очень взволнован функцией CSS scroll snap. Это делает прокрутку более естественной. Теперь перейдем к свойствам привязки прокрутки.

Тип прокрутки

В соответствии со спецификацией CSS, тип scroll-snap-type определяет, является ли элемент контейнером привязки прокрутки , как строго он привязывается, и какие оси учитываются.Давайте проанализируем это.

`Оси контейнера с защелкой`

Ось контейнера привязки прокрутки представляет направление прокрутки. Он может быть горизонтальным или вертикальным. Значение x представляет горизонтальную прокрутку, а y - вертикальную прокрутку.

  / * По горизонтали * /
.раздел {
  дисплей: гибкий;
  переполнение-x: авто;
  тип прокрутки: x;
}

/ * Вертикальный * /
.раздел {
  высота: 250 пикселей;
  переполнение-у: авто;
  прокрутка типа оснастки: y;
}

`Строгость контейнера с защелкой`

Мы не только можем определить направление привязки прокрутки, но также можем определить, насколько оно строгое.Это можно сделать с помощью одного из значений обязательный | близость со значением типа «скролл-лайн» .

Обязательное ключевое слово означает, что браузер должен привязаться к каждой точке прокрутки. Предположим, что свойство scroll-snap-align имеет значение start . Это означает, что прокрутка должна привязываться к началу прокручиваемого контейнера .

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

  .section {
  дисплей: гибкий;
  переполнение-x: авто;
  scroll-snap-type: x обязательный;
}

.section__item {
  прокрутка-привязка-выравнивание: начало;
}

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

См. Перо Scroll Snap Strictness от Ахмада Шадида (@shadeed) на CodePen.

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

  .section {
  дисплей: гибкий;
  переполнение-x: авто;
  / * близость - значение по умолчанию, я добавил его для ясности * /
  тип прокрутки: x близость;
}

`Выравнивание привязки прокрутки`

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

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

Представим, что у нас есть магнит на прокручиваемом контейнере, который помогает нам контролировать точки привязки. Когда типа «прокрутка-привязка» находится в вертикальном положении, выравнивание привязки будет вертикальным. См. Рисунок ниже:

Чтобы сделать это более понятным, просмотрите анимацию ниже для start , center и end .

 начало  прокручиваемого контейнера Дочерний элемент будет привязан к началу   его контейнера горизонтальной прокрутки.
 Центр 
  контейнера для прокрутки Дочерний элемент будет привязан к центру   своего прокручиваемого контейнера.
 конец  прокручиваемого контейнера Дочерний элемент будет привязан к  концу  своего прокручиваемого контейнера.
 Иногда может потребоваться способ предотвратить случайный пропуск пользователем некоторых важных элементов при прокрутке.Если пользователь прокручивает слишком быстро, некоторые элементы можно пропустить.
  .section__item {
  прокрутка-привязка-выравнивание: начало;
  остановка прокрутки: нормальный;
}
  
 На видео ниже при слишком быстрой прокрутке можно пропустить три или четыре элемента.
 Значение по умолчанию для  scroll-snap-stop  -  normal . Чтобы заставить прокрутку привязываться к каждой возможной точке, вы должны всегда использовать  и .
 При  scroll-snap-stop: всегда , браузер будет останавливаться в каждой точке привязки.
  .section__item {
  прокрутка-привязка-выравнивание: начало;
  scroll-snap-stop: всегда;
}
  
 Таким образом, пользователь может прокручивать до одной точки привязки за раз, что поможет избежать пропуска важных элементов. Представьте себе, что у каждой точки остановки есть знак остановки. См. Анимацию ниже:
 Поиграйте с прокруткой ниже в демонстрации и попробуйте переключить параметры.
 См. Перо
 Scroll Snap Stop от Ахмада Шадида (@shadeed)
 на CodePen.
 Большое спасибо Адаму Аргайлу и Шиме Видасу за указание  scroll-snap-stop .
 Сокращенное свойство  scroll-padding  устанавливает отступы прокрутки со всех сторон, аналогично тому, как работает свойство  padding . На рисунке ниже у нас есть отступ  50px  с левой стороны прокручиваемого контейнера. В результате дочерние элементы будут привязаны к левому краю  50px .
  .section {
  переполнение-x: авто;
  scroll-snap-type: x обязательный;
  прокрутка: 0 0 0 50 пикселей;
}
  
 То же самое и с вертикальной прокруткой.См. Пример ниже:
  .section {
  переполнение-у: авто;
  scroll-snap-type: y обязательный;
  прокрутка: 50 пикселей 0 0 0;
}
  
 Свойство  scroll-margin  сокращенно устанавливает интервал между дочерними элементами контейнера прокрутки. Когда к элементу добавляется поле, прокрутка будет выполняться в соответствии с полем. См. Рисунок ниже:
  .item-2  имеет  scroll-margin-left: 20px . В результате контейнер прокрутки будет привязан к  20px  перед этим элементом.Обратите внимание, что когда пользователь снова прокручивает вправо,  .item-3  привязывается к началу контейнера прокрутки. Это означает, что затронут только элемент с полем.
 Список изображений 
 Отличным вариантом использования CSS scroll snap является список изображений. Использование привязки прокрутки значительно улучшит качество прокрутки.
  .images-list {
  дисплей: гибкий;
  переполнение-x: авто;
  тип прокрутки: x;
  разрыв: 1бэр;
  -webkit-overflow-scrolling: сенсорный; / * Важно для устройств iOS * /
}

.images-list img {
  прокрутка-привязка-выравнивание: начало;
}
  
 Обратите внимание, что я использовал  x  в качестве значения  для типа «прокрутка-привязка» . По умолчанию строгость привязки составляет , близость .
 См. Перо
 Scroll Snap - Список изображений, созданный Ахмадом Шадидом (@shadeed)
 на CodePen.
 Список друзей 
 Еще один отличный вариант использования оснастки прокрутки - это список друзей. Пример ниже взят из Facebook (реальный пример).
 .список {
  дисплей: гибкий;
  переполнение-x: авто;
  scroll-snap-type: x обязательный;
  разрыв: 1бэр;
  прокрутка: 48 пикселей;
  padding-bottom: 32px;
  -webkit-overflow-scrolling: сенсорный;
}

.Элемент списка {
  прокрутка-привязка-выравнивание: начало;
}
  
 Обратите внимание, что контейнер для прокрутки имеет значение  padding-bottom: 32px . Цель этого - предоставить дополнительное пространство, чтобы объект  box-shadow  мог отображаться должным образом.
 Список аватаров 
 Для этого варианта использования меня интересует ключевое слово  center  в качестве значения  scroll-snap-align  для дочерних элементов.
  .list {
  дисплей: гибкий;
  переполнение-x: авто;
  scroll-snap-type: x обязательный;
  -webkit-overflow-scrolling: сенсорный;
}

.Элемент списка {
  прокрутка-привязка-выравнивание: по центру;
}
  
 Это полезно для списка аватаров, где важно, чтобы аватар находился в середине контейнера для прокрутки.
 См. Перо
 Scroll Snap - аватары Ахмада Шадида (@shadeed)
 на CodePen.
 Полноростовые секции 
 Использование привязки прокрутки также может быть полезно для вертикальной прокрутки.Примером этого являются секции в полный рост.
  <основной>
   
   
   
   
   

  
  основной {
  высота: 100vh;
  переполнение-у: авто;
  scroll-snap-type: y обязательный;
  -webkit-overflow-scrolling: сенсорный;
}

.раздел {
  высота: 100vh;
  прокрутка-привязка-выравнивание: начало;
}
  
 См. Перо
 Scroll Snap - Full Height Sections, автор Ahmad Shadeed (@shadeed)
 на CodePen.
 Блочные и встроенные значения 
 Стоит отметить, что вы можете использовать логические значения  inline  и  block  для  типа  с привязкой к прокрутке. См. Пример ниже:
  основной {
  scroll-snap-type: встроенный обязательный;
}
  
 В этом примере  inline  представляет размер по горизонтали в режимах горизонтального письма, таких как английский язык. Для таких языков, как японский,  inline  будет представлять вертикальное измерение.
 Если вы хотите узнать больше о логических свойствах CSS, это отличная статья Адриана Роселли.
 Доступность 
 Обеспечьте доступность при использовании привязки прокрутки CSS. Это неправильное использование привязки прокрутки, которое не позволяет пользователю свободно прокручивать контент, чтобы прочитать его.
  .wrapper {
  scroll-snap-type: y обязательный;
}

h3 {
  прокрутка-привязка-выравнивание: начало;
}
  
 Попробуйте сами в демонстрации ниже. Пожалуйста, не делайте этого!
 См. Перо
 Scroll Snap - Доступность - Плохой пример от Ахмада Шадида (@shadeed)
 на CodePen.
 Заключение 
 Это была длинная статья о новой функции CSS, которую я только что изучил. Надеюсь, вы сочтете это полезным. Если вы обнаружите какие-либо ошибки или оставите отзыв, напишите мне в Твиттере @ shadeed9.
 Спасибо за внимание!
 Прочие ресурсы 
 Я написал книгу 
 Рад сообщить вам, что я написал электронную книгу об отладке CSS.
 Если вам интересно, перейдите на debuggingcss.com, чтобы получить бесплатную предварительную версию.
 Как использовать CSS Scroll Snap  Nada Rifki Подписаться
Нада - разработчик JavaScript, которому нравится играть с компонентами пользовательского интерфейса для создания интерфейсов с отличным UX.Она специализируется на Vue.js и любит делиться всем, что может помочь ее коллегам по интерфейсным веб-разработчикам. Нада также увлекается цифровым маркетингом, танцами и китайским языком.
  9 марта 2020  2 мин чтения
835
 Идея использования CSS только для настройки прокрутки вместо того, чтобы играть с JavaScript, звучит здорово, не правда ли?
 Сегодня я собираюсь показать вам, как CSS Scroll Snap помогает вам в этом.
 Так что же делает CSS Scroll Snap? 
 Готов поспорить, вы использовали некоторые библиотеки для управления прокруткой вашего сайта.У меня есть, и я ужасно провел время с некоторыми из них.
 Некоторые из этих библиотек могут сильно снизить производительность вашей страницы и удобство использования.
 Не говоря уже о том, что бороться со всеми ошибками, которые они иногда создают, когда вы усложняете свои новые обновления дизайна, - это настоящая боль.
 Вот почему я предпочитаю использовать эту простую функцию CSS, которая позволяет мне красиво прокручивать мою страницу, не полагаясь на библиотеки JavaScript.
 Эти свойства также помогают мне сэкономить массу времени.
 Проще говоря, CSS Scroll Snap делает привязку прокрутки, блокируя область просмотра в определенной точке (которую вы указываете) при каждой прокрутке.
 Линейная прокрутка, с другой стороны, перемещается в соответствии со скоростью контроллера - будь то мышь, сенсорный жест или клавиши со стрелками.
 Теперь давайте посмотрим, как работает CSS Scroll Snap.
 Если вы хотите сразу перейти к реальному примеру, перейдите к третьему разделу, где я построил карусель Instagram с помощью нескольких строк кода CSS.
 Приступим.
 Как работает CSS Scroll Snap 
 CSS Scroll Snap работает путем применения двух основных свойств:  scroll-snap-type  и  scroll-snap-align .
 Вот что вам нужно знать о каждом:
 Первый, , с привязкой к прокрутке , применяется к родительскому контейнеру. Он принимает два аргумента: направление привязки и поведение привязки:
 .container {
 тип щелчка: [x | y | блок | встроенный | оба] [обязательный | близость ];
} 
 Об аргументах поведения привязки: при выборе  близости  привязка появляется только в ближайшей точке к тому месту, где пользователь остановил прокрутку.
 С другой стороны,  обязательный  заставляет привязку происходить в определенной позиции, которую вы выбираете, когда пользователь прокручивает.
 Второй,  scroll-snap-align , применяется к дочерним элементам контейнера.
 Здесь вы указываете точку привязки для оси x и оси y:
 .children {
 прокрутка-привязка-выравнивание: [нет | начало | конец | центр] {1,2};
} 
 Прежде чем мы продолжим, важно отметить, что ничего из этого не сработает, если вы не укажете переполнение контейнера и не зададите ему фиксированную высоту.
 Кроме того, никогда не следует использовать обязательный, если содержимое внутри одного из ваших дочерних элементов длиннее родительского контейнера. В противном случае пользователь не сможет увидеть этот контент.
 Есть еще два свойства, с которыми нам нужно ознакомиться:
  заполнение прокрутки  (применяется к родительскому контейнеру) во многом похоже на свойство заполнения CSS и действует как смещение. У вас также есть  scroll-padding-top ,  scroll-padding-bottom ,  scroll-padding-left  и  scroll-padding-right .
  scroll-margin  (применяется к дочерним элементам контейнера) также похоже на свойство CSS margin и служит началом. У вас также есть  scroll-margin-top ,  scroll-margin-bottom ,  scroll-margin-left  и  scroll-margin-right .
 Если вам интересно узнать больше обо всех свойствах привязки прокрутки и будущих, документация Mozilla - это всегда хорошее место для начала.
 Как использовать CSS Scroll Snap для создания карусели в стиле Instagram 
 Чтобы помочь вам лучше понять эту концепцию, я сделал небольшую карусель в стиле Instagram на codepen.
 См. Живую демонстрацию здесь:
 CSS Scroll Snap - карусель в стиле Instagram 
 № Описание
 Как видите, в нем семь коробок разных размеров.
 Что меня поражает, так это то, что нам больше нечего делать, кроме как добавить приведенные ниже строки CSS для автоматической привязки прокрутки к каждому полю.
 <стиль>
.container {
    ширина: 60вв;
    высота: 70vh;
    наценка: 15вх авто;
    переполнение-x: прокрутка;
    scroll-snap-type: x обязательный;
    цвет белый;
    цвет фона: oldlace;
    дисплей: гибкий;
    align-items: center;
}

.ребенок {
    левое поле: 0,5 бэр;
    высота: 90%;
    прокрутка-привязка-выравнивание: начало;
    набивка: 1 бэр;
    дисплей: гибкий;
    align-items: center;
    justify-content: center;
    выравнивание текста: центр;
}

.child: nth-child (1n) {
    цвет фона: темнокожий;
    гибкость: 0 0 80%;
}

.child: nth-child (2n) {
    цвет фона: индиго;
    гибкость: 0 0 60%;
}

.child: nth-child (3n) {
    цвет фона: темно-синий;
    гибкость: 0 0 40%;
}

.child: nth-child (4n) {
    цвет фона: бледно-зеленый;
    гибкость: 0 0 50%;
}

.child: nth-child (5n) {
    цвет фона: желтый;
    гибкость: 0 0 80%;
}

.child: nth-child (6n) {
    цвет фона: оранжевый;
    гибкость: 0 0 60%;
}

.child: nth-child (7n) {
    цвет фона: помидор;
    гибкость: 0 0 80%;
}
 
 Решение этой проблемы с помощью только JavaScript потребовало бы много дополнительной работы.
 Поддерживается ли CSS Scroll Snap в кросс-браузере? 
 Хорошо, теперь перейдем к вопросу на миллион долларов: кроссбраузерность.
 Как видите, функция CSS Scroll Snap хорошо поддерживается в современных браузерах.
 Единственная проблема, с которой вы столкнетесь, - это Internet Explorer, для которого требуется более старая версия спецификаций, которую вы можете найти здесь.
 Также я бы посоветовал добавить свойство  -webkit-overflow-scrolling: touch;  в ваш контейнер для поддержки устройств iOS.
 Заключение 
 Вот и все!
 Это так просто, но были времена, когда это могло сэкономить мне часы кода. Попробуйте реализовать привязку прокрутки с помощью JavaScript и пересчитать точку привязки для каждого дочернего элемента с разной шириной, и вы поймете, что я имею в виду.
 Если у вас есть какие-либо вопросы или замечания, дайте мне знать в комментариях или напишите мне в Twitter @RifkiNada. Я всегда отвечаю.
 Ваш интерфейс загружает процессор ваших пользователей? 
 По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket. Https://logrocket.com/signup/ LogRocket похож на DVR для веб-приложений , записывая все, что происходит в вашем веб-приложении или на сайте.Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и составлять отчеты по ключевым показателям производительности внешнего интерфейса, воспроизводить пользовательские сеансы вместе с состоянием приложения, регистрировать сетевые запросы и автоматически обнаруживать все ошибки.
 Модернизируйте отладку веб-приложений - начните мониторинг бесплатно.
 12 CSS Scroll Effects 
 Коллекция отобранных вручную бесплатных  HTML и CSS-эффектов прокрутки  примеров кода. Обновление коллекции за март 2019 года. 5 новинок.
 CSS Эффекты параллакса
 Плагины и примеры jQuery Parallax
  
 Автор 
 Генри Зарза
  11 декабря 2019 
 О коде 
 Части перекрытия 
 Перекрывающаяся часть с закрепленной позицией.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Баннер без полей 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Андрей Шарапов
  3 апреля 2019 г. 
 О коде 
 CSS Scroll-Behavior: Smooth 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Андрей Шарапов
  27 февраля 2019 
 О коде 
 CSS поведение прокрутки, тип привязки прокрутки и режим смешивания 
 Свойства CSS  scroll-behavior  и  scroll-snap-type  - потрясающие инструменты для создания целевых страниц без использования js.К сожалению, эти свойства пока поддерживаются не во всех браузерах.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Райан Маллиган
  15 января 2019 
 О коде 
 CSS Scroll Reveal Sections 
 Используйте свойство  clip-path  для создания разделов героев с фиксированным положением.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Мерт Цукурен
  17 декабря 2018 
 Сделано с 
 HTML / CSS (SCSS) / JavaScript (Babel)
 О коде 
 Простая анимация прокрутки 
 Простая анимация прокрутки в HTML, CSS и JS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Дронка Рауль
  4 декабря 2018 г. 
 Сделано с 
 HTML / CSS (SCSS) / JavaScript (Babel)
 О коде 
 Эффект перекоса 
 Эффект перекоса прокрутки в HTML, CSS и JS.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 magnificode
  6 ноября 2018 
 Сделано с 
 HTML / CSS (SCSS) / JavaScript (Babel)
 О коде 
 Эффект прокрутки фона и текста 
 Супер быстрая идея для эффекта отображения текста при прокрутке.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: -
 О коде 
 Градиент прокрутки 
 Фоновый градиент, который адаптируется к положению прокрутки.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Автор 
 Квентин Верон
  8 апреля 2018 г. 
 О коде 
 Прокрутка одной страницы 
 Прокрутка одной страницы.Ни строчки JavaScript!
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 Сделано с 
 HTML (мопс) / CSS (SCSS) / JavaScript (Babel)
 О коде 
 Наблюдатель перекрестков 
 API, который можно использовать для понимания видимости и положения элементов DOM относительно содержащего элемента или области просмотра верхнего уровня.Позиция доставляется асинхронно и полезна для понимания видимости элементов и реализации предварительной и отложенной загрузки содержимого DOM.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Половина прокрутки 
 Половина прокрутки на чистом CSS.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: -
 О коде 
 Изменение фона CSS при прокрутке 
 Фиксированный элемент меняет цвет при входе в разные секции.Использует повторяющиеся элементы для каждого раздела. Теперь с  режимом наложения  магии для дополнительного эффекта.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: -
 .No related posts.