Радиус границы подложки прокрутки

Классы scroll-bg-radius-* задают радиус скругления полосы прокрутки. Берите их, когда полоса с окрашенной подложкой должна быть прямоугольной или слегка скруглённой, а не капсулой.

Пример

Подпись — класс радиуса. Полоса утолщена классом scroll-bg-4, подложка и ползунок окрашены, чтобы углы было видно.

HTML

<div class="grid grid-col-2 sm:grid-col-4 gap-3">
  <div class="flex flex-col gap-1">
    <div class="h-e8 overflow-auto p-1 radius-ui border border-outline-variant bg-surface color-on-surface scroll-thumb-surface scroll-bg-4 scroll-bg-surface scroll-bg-radius-1" tabindex="0" aria-label="Прокручиваемая область scroll-bg-radius-1">
      <div class="h-f8 p-2 radius-ui bg-surface-container color-on-surface">Прокрутите</div>
    </div>
    <code class="text-1/2 color-on-surface-variant">scroll-bg-radius-1</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="h-e8 overflow-auto p-1 radius-ui border border-outline-variant bg-surface color-on-surface scroll-thumb-surface scroll-bg-4 scroll-bg-surface scroll-bg-radius-2" tabindex="0" aria-label="Прокручиваемая область scroll-bg-radius-2">
      <div class="h-f8 p-2 radius-ui bg-surface-container color-on-surface">Прокрутите</div>
    </div>
    <code class="text-1/2 color-on-surface-variant">scroll-bg-radius-2</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="h-e8 overflow-auto p-1 radius-ui border border-outline-variant bg-surface color-on-surface scroll-thumb-surface scroll-bg-4 scroll-bg-surface scroll-bg-radius-3" tabindex="0" aria-label="Прокручиваемая область scroll-bg-radius-3">
      <div class="h-f8 p-2 radius-ui bg-surface-container color-on-surface">Прокрутите</div>
    </div>
    <code class="text-1/2 color-on-surface-variant">scroll-bg-radius-3</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="h-e8 overflow-auto p-1 radius-ui border border-outline-variant bg-surface color-on-surface scroll-thumb-surface scroll-bg-4 scroll-bg-surface scroll-bg-radius-4" tabindex="0" aria-label="Прокручиваемая область scroll-bg-radius-4">
      <div class="h-f8 p-2 radius-ui bg-surface-container color-on-surface">Прокрутите</div>
    </div>
    <code class="text-1/2 color-on-surface-variant">scroll-bg-radius-4</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`scroll-bg-radius-1`	`--sf-scroll-radius: var(--sf-a1)`	—
`scroll-bg-radius-2`	`--sf-scroll-radius: var(--sf-a2)`	—
`scroll-bg-radius-3`	`--sf-scroll-radius: var(--sf-a4)`	—
`scroll-bg-radius-4`	`--sf-scroll-radius: var(--sf-a8)`	—

Условия (что это): ширина экрана — нет; состояния — нет.

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

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Переменная	Значение по умолчанию
`--sf-a1`	`0.0625rem`
`--sf-a2`	`0.125rem`
`--sf-a4`	`0.25rem`
`--sf-a8`	`0.5rem`

Применение

Шкала

Класс	Токен	Радиус
`scroll-bg-radius-1`	`--sf-a1`	1px
`scroll-bg-radius-2`	`--sf-a2`	2px
`scroll-bg-radius-3`	`--sf-a4`	4px
`scroll-bg-radius-4`	`--sf-a8`	8px

Значения приведены при 1rem = 16px. Без класса радиус равен 4rem — подложка и ползунок выглядят капсулами.

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

Класс меняет переменную --sf-scroll-radius, которую читают и подложка, и ползунок, поэтому скругляются оба. Классы радиуса ползунка меняют ту же переменную по своей шкале; на одном элементе ставьте только один класс радиуса.

HTML

<div class="overflow-auto scroll-bg-surface scroll-bg-radius-2">…</div>

Ограничения

Классы задают переменные, которые читают псевдоэлементы ::-webkit-scrollbar. Их поддерживают Chrome, Edge, Safari и другие браузеры на их движках; Firefox рисует свою полосу прокрутки и классы не учитывает.
Если у элемента задано scrollbar-color или scrollbar-width (например, классом scroll-subtle), Chrome и Edge рисуют стандартную полосу и игнорируют эти классы.
Ставьте класс на сам прокручиваемый элемент. Базовые стили задают переменные полосы каждому элементу заново, поэтому класс не переходит на вложенные области. Для полосы страницы ставьте класс на <html>.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

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

Содержание