Режимы полосы прокруткиlink

Компонент sf-scrollbar создаёт предсказуемую прокручиваемую область и позволяет выбрать один из четырёх готовых режимов. Внешний вид, размеры, состояния и поведение принадлежат SIMAI Framework: проекту не нужно копировать CSS или JavaScript полосы прокрутки.

Быстрый стартlink

<div class="sf-scrollbar" data-sf-scrollbar="overlay">
    <div class="sf-scrollbar__viewport" tabindex="0" aria-label="Навигация">
        <!-- Длинное содержимое -->
    </div>
</div>

Высоту или максимальную высоту задавайте внешнему компоненту. Прокручивается внутренний элемент .sf-scrollbar__viewport.

Если атрибут data-sf-scrollbar не указан, компонент использует режим overlay.

Какой режим выбратьlink

Значение	Поведение	Когда использовать
`overlay`	Скрыт в покое, появляется при прокрутке или фокусе. Индикатор имеет толщину 2 px и расширяется до 6 px в области захвата 16 px	Рекомендуемый режим для меню, содержания страницы, панелей и компактных рабочих областей
`standard`	Постоянная системная полоса, оформленная семантическими переменными Framework	Когда полоса должна быть привычной и постоянно очевидной
`persistent`	Управляемый индикатор толщиной 6 px постоянно виден поверх содержимого	Для длинных областей, где положение прокрутки важно видеть всегда
`hidden`	Индикатор скрыт, прокрутка колесом, жестом и клавиатурой сохраняется	Только когда направление и возможность прокрутки очевидны из другого элемента интерфейса

Overlaylink

<aside class="sf-scrollbar" data-sf-scrollbar="overlay">
    <nav class="sf-scrollbar__viewport" tabindex="0" aria-label="Разделы">
        ...
    </nav>
</aside>

overlay не занимает отдельную колонку и не меняет ширину содержимого между состояниями. После прокрутки индикатор скрывается через короткую паузу. При наведении на область полосы она становится шире, поэтому её проще захватить мышью.

Standardlink

<div class="sf-scrollbar" data-sf-scrollbar="standard">
    <div class="sf-scrollbar__viewport" tabindex="0">
        ...
    </div>
</div>

Этот режим использует нативный механизм браузера и переменные Framework для цвета, толщины и радиуса. Настройки браузера и операционной системы могут изменять его фактическое отображение.

Persistentlink

<div class="sf-scrollbar" data-sf-scrollbar="persistent">
    <div class="sf-scrollbar__viewport" tabindex="0">
        ...
    </div>
</div>

persistent использует ту же геометрию и управление, что overlay, но не скрывает индикатор после завершения прокрутки.

Hiddenlink

<div class="sf-scrollbar" data-sf-scrollbar="hidden">
    <div class="sf-scrollbar__viewport" tabindex="0">
        ...
    </div>
</div>

Не используйте hidden, если пользователь может не понять, что область прокручивается. Клавиатурный фокус должен оставаться видимым, а содержимое — доступным без мыши.

Доступностьlink

Добавляйте прокручиваемой области tabindex="0", если она сама не содержит фокусируемых элементов.
Указывайте понятный aria-label или связывайте область с видимым заголовком.
Управляемые режимы поддерживают колесо, трекпад, перетаскивание ползунка, ArrowUp, ArrowDown, PageUp, PageDown, Home и End.
При prefers-reduced-motion: reduce переходы отключаются.
В режиме повышенной контрастности Framework возвращает управление полосой браузеру и операционной системе.
На сенсорных устройствах полоса остаётся индикатором; основным способом прокрутки служит жест.

Совместимость с прежними утилитамиlink

.scroll-hover и .scroll-subtle остаются доступными. Они меняют нативную полосу конкретного элемента и не создают управляемый компонент.

Для нового интерфейса, которому нужны готовые режимы, автоскрытие, перетаскивание и одинаковый контракт в разных браузерах, используйте sf-scrollbar.