Толщина подложки прокрутки
Классы scroll-bg-1 … scroll-bg-4 задают толщину полосы прокрутки:
ширину вертикальной полосы и высоту горизонтальной. Берите их, когда полосу
нужно сделать незаметнее в плотном интерфейсе или крупнее там, где её часто
перетаскивают.
Пример
Подпись — класс толщины. Подложка окрашена scroll-bg-surface, ползунок —
scroll-thumb-surface.
Классы
| Класс | CSS | Значения |
|---|---|---|
scroll-bg-1 |
--sf-scroll-bg-width: var(--sf-b0) |
— |
scroll-bg-2 |
--sf-scroll-bg-width: var(--sf-b4) |
— |
scroll-bg-3 |
--sf-scroll-bg-width: var(--sf-b8) |
— |
scroll-bg-4 |
--sf-scroll-bg-width: var(--sf-c1) |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.
| Переменная | Значение по умолчанию |
|---|---|
--sf-b0 |
0.625rem |
--sf-b4 |
0.875rem |
--sf-b8 |
1.125rem |
--sf-c1 |
1.375rem |
Применение
Шкала
| Класс | Токен | Толщина |
|---|---|---|
scroll-bg-1 |
--sf-b0 |
10px |
scroll-bg-2 |
--sf-b4 |
14px |
scroll-bg-3 |
--sf-b8 |
18px |
scroll-bg-4 |
--sf-c1 |
22px |
Значения приведены при 1rem = 16px. Без класса полоса имеет толщину
scroll-bg-2.
Ползунок отступает от краёв полосы на прозрачную рамку, поэтому он тоньше полосы. Этот отступ задают классы толщины ползунка.
<div class="max-h-f4 overflow-auto scroll-bg-1">
<!-- плотный список -->
</div>
Ограничения
- Классы задают переменные, которые читают псевдоэлементы
::-webkit-scrollbar. Их поддерживают Chrome, Edge, Safari и другие браузеры на их движках; Firefox рисует свою полосу прокрутки и классы не учитывает. - Если у элемента задано
scrollbar-colorилиscrollbar-width(например, классомscroll-subtle), Chrome и Edge рисуют стандартную полосу и игнорируют эти классы. - Ставьте класс на сам прокручиваемый элемент. Базовые стили задают
переменные полосы каждому элементу заново, поэтому класс не переходит на
вложенные области. Для полосы страницы ставьте класс на
<html>. - У семейства нет префиксов ширины экрана и состояния.