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

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

Пример

Задача 1
Задача 2
Задача 3
Задача 4
Задача 5
Задача 6
Задача 7
Задача 8

HTML

<div class="sf-scrollbar h-f0" data-mode="overlay">
  <div class="sf-scrollbar__viewport" aria-label="Список задач">
    <ul class="flex flex-col gap-2 m-0 p-2 list-none"><li class="bg-surface-container p-2 radius-2">Задача 1</li><li class="bg-surface-container p-2 radius-2">Задача 2</li><li class="bg-surface-container p-2 radius-2">Задача 3</li><li class="bg-surface-container p-2 radius-2">Задача 4</li><li class="bg-surface-container p-2 radius-2">Задача 5</li><li class="bg-surface-container p-2 radius-2">Задача 6</li><li class="bg-surface-container p-2 radius-2">Задача 7</li><li class="bg-surface-container p-2 radius-2">Задача 8</li></ul>
  </div>
</div>

Разметка

Минимальную разметку показывает пример выше: корень sf-scrollbar и прямой потомок sf-scrollbar__viewport, внутри которого лежит содержимое.

Корню задайте высоту (для горизонтальной прокрутки — ширину): область прокручивается внутри неё.
Прокручивается только прямой потомок sf-scrollbar__viewport.
Дорожку sf-scrollbar__track и ползунок sf-scrollbar__thumb скрипт компонента добавляет сам; в разметке их нет.
Области дайте доступное имя через aria-label или aria-labelledby.

Варианты

Режим

Атрибут data-mode на корне задаёт поведение полосы: overlay (по умолчанию) — тонкая полоса появляется при прокрутке, наведении и фокусе и гаснет в покое; persistent — полоса видна всегда; standard — системная полоса, окрашенная в цвета темы; hidden — полосы нет, область прокручивается колесом, касанием и клавишами. Режимы standard и hidden работают без скрипта. data-sf-scrollbar — другое имя того же атрибута.

HTML

<div class="grid grid-col-1 md:grid-col-2 gap-3">
  <div class="flex flex-col gap-1">
    <div class="sf-scrollbar h-f0" data-mode="overlay">
      <div class="sf-scrollbar__viewport" aria-label="Режим overlay">
        <ul class="flex flex-col gap-2 m-0 p-2 list-none"><li class="bg-surface-container p-2 radius-2">Задача 1</li><li class="bg-surface-container p-2 radius-2">Задача 2</li><li class="bg-surface-container p-2 radius-2">Задача 3</li><li class="bg-surface-container p-2 radius-2">Задача 4</li><li class="bg-surface-container p-2 radius-2">Задача 5</li><li class="bg-surface-container p-2 radius-2">Задача 6</li><li class="bg-surface-container p-2 radius-2">Задача 7</li><li class="bg-surface-container p-2 radius-2">Задача 8</li></ul>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">data-mode="overlay"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-scrollbar h-f0" data-mode="persistent">
      <div class="sf-scrollbar__viewport" aria-label="Режим persistent">
        <ul class="flex flex-col gap-2 m-0 p-2 list-none"><li class="bg-surface-container p-2 radius-2">Задача 1</li><li class="bg-surface-container p-2 radius-2">Задача 2</li><li class="bg-surface-container p-2 radius-2">Задача 3</li><li class="bg-surface-container p-2 radius-2">Задача 4</li><li class="bg-surface-container p-2 radius-2">Задача 5</li><li class="bg-surface-container p-2 radius-2">Задача 6</li><li class="bg-surface-container p-2 radius-2">Задача 7</li><li class="bg-surface-container p-2 radius-2">Задача 8</li></ul>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">data-mode="persistent"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-scrollbar h-f0" data-mode="standard">
      <div class="sf-scrollbar__viewport" aria-label="Режим standard">
        <ul class="flex flex-col gap-2 m-0 p-2 list-none"><li class="bg-surface-container p-2 radius-2">Задача 1</li><li class="bg-surface-container p-2 radius-2">Задача 2</li><li class="bg-surface-container p-2 radius-2">Задача 3</li><li class="bg-surface-container p-2 radius-2">Задача 4</li><li class="bg-surface-container p-2 radius-2">Задача 5</li><li class="bg-surface-container p-2 radius-2">Задача 6</li><li class="bg-surface-container p-2 radius-2">Задача 7</li><li class="bg-surface-container p-2 radius-2">Задача 8</li></ul>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">data-mode="standard"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-scrollbar h-f0" data-mode="hidden">
      <div class="sf-scrollbar__viewport" aria-label="Режим hidden">
        <ul class="flex flex-col gap-2 m-0 p-2 list-none"><li class="bg-surface-container p-2 radius-2">Задача 1</li><li class="bg-surface-container p-2 radius-2">Задача 2</li><li class="bg-surface-container p-2 radius-2">Задача 3</li><li class="bg-surface-container p-2 radius-2">Задача 4</li><li class="bg-surface-container p-2 radius-2">Задача 5</li><li class="bg-surface-container p-2 radius-2">Задача 6</li><li class="bg-surface-container p-2 radius-2">Задача 7</li><li class="bg-surface-container p-2 radius-2">Задача 8</li></ul>
      </div>
    </div>
    <code class="text-1/2 color-on-surface-variant">data-mode="hidden"</code>
  </div>
</div>

Ось

data-axis="vertical" (по умолчанию) рисует полосу у конца строки, data-axis="horizontal" — внизу, для горизонтальной ленты. Горизонтальная полоса учитывает направление письма. data-sf-scrollbar-axis — другое имя того же атрибута.

Январь
Февраль
Март
Апрель
Май
Июнь
Июль
Август

HTML

<div class="sf-scrollbar w-full" data-mode="persistent" data-axis="horizontal">
  <div class="sf-scrollbar__viewport" aria-label="Месяцы">
    <ul class="flex flex-nowrap gap-2 m-0 p-2 list-none"><li class="bg-surface-container p-2 radius-2 w-e5 flex-none">Январь</li><li class="bg-surface-container p-2 radius-2 w-e5 flex-none">Февраль</li><li class="bg-surface-container p-2 radius-2 w-e5 flex-none">Март</li><li class="bg-surface-container p-2 radius-2 w-e5 flex-none">Апрель</li><li class="bg-surface-container p-2 radius-2 w-e5 flex-none">Май</li><li class="bg-surface-container p-2 radius-2 w-e5 flex-none">Июнь</li><li class="bg-surface-container p-2 radius-2 w-e5 flex-none">Июль</li><li class="bg-surface-container p-2 radius-2 w-e5 flex-none">Август</li></ul>
  </div>
</div>

Доступность

Область sf-scrollbar__viewport получает tabindex="0", если его нет, и роль region, если у неё есть имя. С клавиатуры её прокручивают стрелками, Page Up и Page Down, Home и End.
Ползунок получает role="scrollbar", aria-controls на область, aria-orientation и aria-valuenow от 0 до 100. Имя он берёт у области; без имени области ползунок называется английским «Scroll». В порядок фокуса ползунок не входит: клавиатурная остановка — сама область.
В режиме hidden пользователь не видит, что область прокручивается: оставляйте видимый край обрезанного содержимого.

JavaScript

Скрипт компонента находит корни .sf-scrollbar при загрузке страницы и в добавленной позже разметке и следит за изменением data-mode и data-axis. Размер ползунка пересчитывается при изменении содержимого и размеров области. SF.Scrollbar.init(target) подключает корни внутри target, SF.Scrollbar.destroy(root) снимает полосу и обработчики. Состояние полосы скрипт пишет в атрибуты корня: data-sf-scrollbar-state (active или idle), data-sf-scrollbar-overflow (true, если есть что прокручивать) и data-sf-scrollbar-dragging. Событий компонент не отправляет.

Классы

Что	Классы
Блок	`sf-scrollbar`
Части	`sf-scrollbar__thumb`, `sf-scrollbar__thumb--horizontal`, `sf-scrollbar__track`, `sf-scrollbar__track--horizontal`, `sf-scrollbar__viewport`

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-scrollbar); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-scrollbar-active-size`	`var(--sf-a6)`	`width`, `inline-size`, `height`, `block-size`
`--sf-scrollbar-hit-size`	`var(--sf-b6)`	`width`, `inline-size`, `height`, `block-size`
`--sf-scrollbar-keyboard-step`	`var(--sf-d0)`	—
`--sf-scrollbar-min-thumb-size`	`var(--sf-d1)`	`min-height`, `min-block-size`, `min-width`, `min-inline-size`
`--sf-scrollbar-rest-size`	`var(--sf-a2)`	`width`, `inline-size`, `height`, `block-size`
`--sf-scrollbar-thumb-color`	`color-mix(

Code

  in srgb,
  var(--sf-on-surface) 34%,
  var(--sf-transparent)
)` | `background` |

См. также

Оглавление

Навигация

Главное

Документация

Содержание

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

Пример

Разметка

Варианты

Режим

Ось

Доступность

JavaScript

Классы

Переменные

См. также

Настройки

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

Пример

Разметка

Варианты

Режим

Ось

Доступность

JavaScript

Классы

Переменные

См. также

Поиск по документации