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