Радиус границы ползунка прокрутки
Классы scroll-thumb-radius-* задают радиус скругления ползунка полосы
прокрутки. Берите их, когда ползунок должен быть прямоугольным или слегка
скруглённым, а не капсулой.
Пример
Подпись — класс радиуса. Полоса утолщена (scroll-bg-4), ползунок
заполняет её целиком (scroll-thumb-0) и окрашен, чтобы углы было видно.
Классы
| Класс | CSS | Значения |
|---|---|---|
scroll-radius-1 |
--sf-scroll-radius: var(--sf-a0) |
— |
scroll-thumb-radius-1 |
--sf-scroll-radius: var(--sf-a0) |
— |
scroll-radius-2 |
--sf-scroll-radius: var(--sf-a4) |
— |
scroll-thumb-radius-2 |
--sf-scroll-radius: var(--sf-a4) |
— |
scroll-radius-3 |
--sf-scroll-radius: var(--sf-b4) |
— |
scroll-thumb-radius-3 |
--sf-scroll-radius: var(--sf-b4) |
— |
scroll-radius-4 |
--sf-scroll-radius: var(--sf-d6) |
— |
scroll-thumb-radius-4 |
--sf-scroll-radius: var(--sf-d6) |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
| Переменная | Значение по умолчанию |
|---|---|
--sf-a0 |
0rem |
--sf-a4 |
0.25rem |
--sf-b4 |
0.875rem |
--sf-d6 |
4rem |
Применение
Шкала
| Класс | Токен | Радиус |
|---|---|---|
scroll-thumb-radius-1 |
--sf-a0 |
0 |
scroll-thumb-radius-2 |
--sf-a4 |
4px |
scroll-thumb-radius-3 |
--sf-b4 |
14px |
scroll-thumb-radius-4 |
--sf-d6 |
64px |
Значения приведены при 1rem = 16px. Без класса радиус равен
scroll-thumb-radius-4: ползунок — капсула.
Ползунок и подложка вместе
Класс меняет переменную --sf-scroll-radius, которую читают и ползунок, и
подложка, поэтому окрашенная подложка скругляется так же. Классы
радиуса подложки меняют ту
же переменную по своей шкале; на одном элементе ставьте только один класс
радиуса.
<div class="overflow-auto scroll-thumb-surface scroll-thumb-radius-2">…</div>
Другие имена
scroll-radius-1 … scroll-radius-4 — вторые имена тех же классов с тем же
действием.
Ограничения
- Классы задают переменные, которые читают псевдоэлементы
::-webkit-scrollbar. Их поддерживают Chrome, Edge, Safari и другие браузеры на их движках; Firefox рисует свою полосу прокрутки и классы не учитывает. - Если у элемента задано
scrollbar-colorилиscrollbar-width(например, классомscroll-subtle), Chrome и Edge рисуют стандартную полосу и игнорируют эти классы. - Ставьте класс на сам прокручиваемый элемент. Базовые стили задают
переменные полосы каждому элементу заново, поэтому класс не переходит на
вложенные области. Для полосы страницы ставьте класс на
<html>. - У семейства нет префиксов ширины экрана и состояния.