Полоса прокрутки

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

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


Анатомия

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

Примечание. Индикатор хода прокрутки не предназначен для перетаскивания.

1. Доступность прокрутки вверх (отключено)
2. Индикатор прогресса прокрутки
3. Прокрутка вниз

Характеристики

значок выноски
Метки макета
Определения E, M, KL, P, Flex

Положение полосы прокрутки с расположенной основной навигацией и свернутой панелью управления.

Положение полосы прокрутки только с заголовком приложения

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

Положение полосы прокрутки с заголовком приложения и расширенной панелью управления

Положение полосы прокрутки с панелью приложения/заголовком и свернутой панелью управления

Положение полосы прокрутки только для панели приложения/заголовка

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

Положение полосы прокрутки с заголовком приложения и расширенной панелью управления

Положение полосы прокрутки при небольшой высоте экрана

Дополнительный индикатор прогресса прокрутки


Стили

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

Цвет

Элемент Цвет (дневной режим) Цвет (ночной режим)
Основные значки — активное состояние Белый Белый @ 88%
Основные значки – неактивное состояние Белый @ 56% Белый @ 50%
Индикатор прогресса прокрутки Белый @ 16% Белый @ 12%

Размеры

Элемент Размер (дп)
Основной значок 44
Коснитесь цели 76
Ширина индикатора прогресса прокрутки 6
Радиус закругления углов (R4) Полный

Примеры

Полоса прокрутки в представлении содержимого сетки
Полоса прокрутки в представлении содержимого списка с индикатором хода прокрутки
Полоса прокрутки в представлении содержимого сетки
Полоса прокрутки в режиме просмотра содержимого списка