This page is being translated; the original is shown (Русский ).
Цвет подложки прокрутки
Классы scroll-bg-* задают цвет подложки — дорожки, по которой ходит
ползунок полосы прокрутки. Берите их, когда прокручиваемая область должна
показывать, где у неё полоса, или когда подложку нужно согласовать с цветом
блока.
Пример
Подпись — класс подложки; на всех образцах ползунок окрашен классом
scroll-thumb-surface, чтобы его было видно.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-2 sm:grid-col-3 lg:grid-col-5 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-transparent" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-transparent" >
<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-transparent</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-current" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-current" >
<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-current</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-surface" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-surface" >
<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-surface</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-primary" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-primary" >
<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-primary</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-secondary" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-secondary" >
<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-secondary</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-tertiary" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-tertiary" >
<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-tertiary</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-error" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-error" >
<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-error</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-warning" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-warning" >
<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-warning</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-success" tabindex ="0" aria-label ="Прокручиваемая область scroll-bg-success" >
<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-success</code >
</div >
</div >
Классы
Класс
CSS
Значения
scroll-bg-transparent--sf-scroll-bg-track: var(--sf-transparent)—
scroll-bg-current--sf-scroll-bg-track: var(--sf-current)—
scroll-bg-surface--sf-scroll-bg-track: var(--sf-surface-transparent-overlay)—
scroll-bg-primary--sf-scroll-bg-track: var(--sf-primary-transparent-overlay)—
scroll-bg-secondary--sf-scroll-bg-track: var(--sf-secondary-transparent-overlay)—
scroll-bg-tertiary--sf-scroll-bg-track: var(--sf-tertiary-transparent-overlay)—
scroll-bg-error--sf-scroll-bg-track: var(--sf-error-transparent-overlay)—
scroll-bg-warning--sf-scroll-bg-track: var(--sf-warning-transparent-overlay)—
scroll-bg-success--sf-scroll-bg-track: var(--sf-success-transparent-overlay)—
Условия (что это ): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены .
Переменная
Значение по умолчанию
--sf-transparentrgba(255,255,255,0)
--sf-currentcurrentColor
--sf-surface-transparent-overlaylight-dark(var(--sf-neutral-50--alfa-32), var(--sf-neutral-90--alfa-32))
--sf-primary-transparent-overlaylight-dark(var(--sf-primary-50--alfa-24), var(--sf-primary-90--alfa-24))
--sf-secondary-transparent-overlaylight-dark(var(--sf-secondary-50--alfa-24), var(--sf-secondary-90--alfa-24))
--sf-tertiary-transparent-overlaylight-dark(var(--sf-tertiary-50--alfa-24), var(--sf-tertiary-90--alfa-24))
--sf-error-transparent-overlaylight-dark(var(--sf-error-50--alfa-24), var(--sf-error-90--alfa-24))
--sf-warning-transparent-overlaylight-dark(var(--sf-warning-50--alfa-24), var(--sf-warning-90--alfa-24))
--sf-success-transparent-overlaylight-dark(var(--sf-success-50--alfa-24), var(--sf-success-90--alfa-24))
Применение
Выбор цвета
По умолчанию подложка прозрачна. Классы ролей дают полупрозрачный тон роли
(--sf-<роль>-transparent-overlay), поэтому подложка читается и на светлом,
и на тёмном фоне. scroll-bg-current берёт цвет текста элемента,
scroll-bg-transparent возвращает прозрачность.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="max-h-f4 overflow-auto scroll-bg-surface" >
<!-- длинный список -->
</div >
Вместе с ползунком
Подложку настраивают вместе с ползунком: цвет ползунка задают
классы цвета ползунка ,
толщину полосы —
классы толщины подложки .
HTML wrap_text Wrap source lines content_copy Copy
<div class ="overflow-auto scroll-bg-primary scroll-thumb-surface scroll-bg-3" >…</div >
Ограничения
Классы задают переменные, которые читают псевдоэлементы ::-webkit-scrollbar.
Их поддерживают Chrome, Edge, Safari и другие браузеры на их движках;
Firefox рисует свою полосу прокрутки и классы не учитывает.
Если у элемента задано scrollbar-color или scrollbar-width (например,
классом scroll-subtle), Chrome и Edge рисуют стандартную полосу и
игнорируют эти классы.
Ставьте класс на сам прокручиваемый элемент. Базовые стили задают
переменные полосы каждому элементу заново, поэтому класс не переходит на
вложенные области. Для полосы страницы ставьте класс на <html>.
У семейства нет префиксов ширины экрана и состояния.
См. также
Предыдущая Поведение при прокрутке Следующая Радиус границы подложки прокрутки
