Scrollbar

Полоса прокрутки. Это не отдельный виджет, а оформление прокручиваемого контейнера — класс вешается на элемент, у которого есть overflow, своей разметки у компонента нет.

Контексты

data-context · ось Context набора 795:52
overlay дорожки нет — бегунок над содержимым
Операция № 001 · ₽ 12 500,50
Операция № 002 · ₽ 12 637,75
Операция № 003 · ₽ 12 775,00
Операция № 004 · ₽ 12 912,25
Операция № 005 · ₽ 13 049,50
Операция № 006 · ₽ 13 186,75
Операция № 007 · ₽ 13 324,00
Операция № 008 · ₽ 13 461,25
Операция № 009 · ₽ 13 598,50
Операция № 010 · ₽ 13 735,75
Операция № 011 · ₽ 13 873,00
Операция № 012 · ₽ 14 010,25
table дорожка видима во всю длину
Операция № 001 · ₽ 12 500,50
Операция № 002 · ₽ 12 637,75
Операция № 003 · ₽ 12 775,00
Операция № 004 · ₽ 12 912,25
Операция № 005 · ₽ 13 049,50
Операция № 006 · ₽ 13 186,75
Операция № 007 · ₽ 13 324,00
Операция № 008 · ₽ 13 461,25
Операция № 009 · ₽ 13 598,50
Операция № 010 · ₽ 13 735,75
Операция № 011 · ₽ 13 873,00
Операция № 012 · ₽ 14 010,25

Размеры

data-size · коллекция переменных «❖ Scrollbar/Width-Height»
md 6px · Width-Height/dim-75
Операция № 001 · ₽ 12 500,50
Операция № 002 · ₽ 12 637,75
Операция № 003 · ₽ 12 775,00
Операция № 004 · ₽ 12 912,25
Операция № 005 · ₽ 13 049,50
Операция № 006 · ₽ 13 186,75
Операция № 007 · ₽ 13 324,00
Операция № 008 · ₽ 13 461,25
Операция № 009 · ₽ 13 598,50
Операция № 010 · ₽ 13 735,75
Операция № 011 · ₽ 13 873,00
Операция № 012 · ₽ 14 010,25
lg 8px · Width-Height/dim-100
Операция № 001 · ₽ 12 500,50
Операция № 002 · ₽ 12 637,75
Операция № 003 · ₽ 12 775,00
Операция № 004 · ₽ 12 912,25
Операция № 005 · ₽ 13 049,50
Операция № 006 · ₽ 13 186,75
Операция № 007 · ₽ 13 324,00
Операция № 008 · ₽ 13 461,25
Операция № 009 · ₽ 13 598,50
Операция № 010 · ₽ 13 735,75
Операция № 011 · ₽ 13 873,00
Операция № 012 · ₽ 14 010,25

Разницу видно только в браузерах на WebKit — Safari и Chrome. Стандартное свойство scrollbar-width принимает лишь auto, thin и none и чисел не берёт, поэтому в Firefox обе величины выглядят одинаково тонкими. Это ограничение браузера, а не недоделка компонента.

Ориентация

ось Orientation набора 795:52
горизонтальная таблица шире экрана
Колонка 1
Колонка 2
Колонка 3
Колонка 4
Колонка 5
Колонка 6
Колонка 7
горизонтальная · overlay без дорожки — восьмой вариант набора
Колонка 1
Колонка 2
Колонка 3
Колонка 4
Колонка 5
Колонка 6
Колонка 7
обе оси на пересечении — угол, он красится как дорожка
Операция № 001 · ₽ 12 500,50 · счёт 40817810 · 17.05.2026
Операция № 002 · ₽ 12 637,75 · счёт 40817810 · 17.05.2026
Операция № 003 · ₽ 12 775,00 · счёт 40817810 · 18.05.2026
Операция № 004 · ₽ 12 912,25 · счёт 40817810 · 18.05.2026
Операция № 005 · ₽ 13 049,50 · счёт 40817810 · 19.05.2026

Токены

сверено по всем 4 темам · Plugin API 2026-08-31
ЭлементТокен макетаНаш токенСветлаяТёмная
Бегунок, покой Fill/Neutral-Blue/Soft/Default --ds-nba-30 #aeb5bd 30% #91989d 40%
Бегунок, наведение Fill/Neutral-Blue/Soft/Pressed --ds-nba-soft-pressed #aeb5bd 40% #91989d 80%
Дорожка (context=table) Static/Surface/Neutral-Blue/1 - Low --ds-surface-nb-low #f6f8fc #1c2023
Скругление бегунка cornerRadius 999 --ds-scrollbar-r 999px — пилюля
Толщина ❖ Scrollbar/Width-Height --ds-scrollbar-width MD 6px · LG 8px

Наведение стоит на ролевом токене, а не на ступени общей лесенки, и это не придирка: --ds-nba-40 даёт нужные 40% только в светлых темах, а в тёмных 60%; --ds-nba-50 — наоборот, 80% только в тёмных. Ни одна ступень не отвечает роли по всем четырём темам сразу.

Правила использования

когда и когда НЕ

Когда использовать

  • Таблицы и длинные списки операций — вертикальная прокрутка
  • Таблица шире экрана — горизонтальная
  • Выпадающие меню и текстовые поля — контекст overlay, без дорожки
  • Боковые панели и модальные окна с длинным содержимым

Когда НЕ использовать

  • Содержимое помещается целиком — полоса не нужна вовсе, а не «пусть будет»
  • Нужно показать заполнение или ход процесса — это ProgressBar
  • Нужен собственный бегунок поверх чужого прокручиваемого блока (карусель, виртуальный список со своей геометрией) — компонент такого не умеет

State Explorer

Интерактивный тест состояний