home chevron_right
Прокрутка chevron_right
Толщина ползунка прокрутки (scroll)

Толщина ползунка прокрутки (scroll / scroll-thumb-size)link

https://dev.ru.simai.io/ru/ui/utility/scroll/scroll-slider-width.php

Классы и значенияlink

Класс Значение переменной
.scroll-1 / .scroll-thumb-1 --sf-scroll-thumb-size: var(--sf-a4);
.scroll-2 / .scroll-thumb-2 --sf-scroll-thumb-size: var(--sf-a3);
.scroll-3 / .scroll-thumb-3 --sf-scroll-thumb-size: var(--sf-a2);
.scroll-4 / .scroll-thumb-4 --sf-scroll-thumb-size: var(--sf-a1);

Описаниеlink

Эти модификаторы задают минимальный видимый размер ползунка (thumb) через переменную --sf-scroll-thumb-size.

  • scroll-* — историческое имя.
  • scroll-thumb-* — предпочтительное имя для новых примеров и документации.

Синтаксисlink

  • scroll-{1...4}
  • scroll-thumb-{1...4}

Примерlink

<html class="scroll-thumb-4 h-d5 overflow-auto">
  <div class="p-1">
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
  </div>
</html>

Playgroundlink