Содержание

Создание стилей панелей прокрутки с помощью 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

переполнение-y: видимый | скрытый | прокрутка | авто | начальный | наследование;

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

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

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

Учебник

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;
}


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