Scrollbar
Scrollbar - компонент для создания кастомных скроллбаров с красивым дизайном. Идеально подходит для замены стандартных браузерных скроллбаров и создания единообразного пользовательского интерфейса.
Import
Usage
Базовый пример использования с фиксированной высотой.
Высота контейнера
С фиксированной высотой
Используйте свойство height для установки фиксированной высоты контейнера.
С максимальной высотой
Используйте свойство maxHeight для ограничения максимальной высоты. Контейнер будет расширяться по содержимому до указанного максимума.
Кастомная высота
Комбинируйте высоту с другими стилями.
Направления прокрутки
Вертикальный скролл
По умолчанию Scrollbar работает с вертикальной прокруткой.
Горизонтальный скролл
Scrollbar автоматически определяет необходимость горизонтальной прокрутки.
В обоих направлениях
По��держивается одновременная прокрутка в обоих направлениях.
Видимость скроллбара
Автоскрытие
Скроллбар автоматически скрывается при отсутствии активности.
Всегда видимый
Скроллбар всегда остается видимым.
Примеры использования
В карточке
Scrollbar отлично работает внутри карточек.
Со списком
Идеально подходит для длинных списков.
С таблицей
Используйте Scrollbar для прокрутки больших таблиц.
С кнопками управления
Программное управление прокруткой через ref.
Размеры
Вы можете настроить размер контейнера под ваши нужды.
Свойства
Scrollbar Props
| Атрибут | Тип | Описание | По умолчанию |
|---|---|---|---|
| children | ReactNode | Содержимое для прокрутки (обязательное) | - |
| className | string | Дополнительные CSS классы | - |
| classNames | ScrollbarClassNames | Классы для кастомизации элементов | - |
| height | string | number | Высота контейнера | - |
| maxHeight | string | number | Максимальная высота контейнера | - |
| width | string | number | Ширина контейнера | - |
| maxWidth | string | number | Максимальная ширина контейнера | - |
ScrollbarClassNames
| Атрибут | Описание |
|---|---|
| base | Класс для контейнера скроллбара |
| track | Класс для трека скроллбара (.simplebar-track) |
| scrollbar | Класс для самого скроллбара (.simplebar-scrollbar::before) |
| content | Класс для контента (.simplebar-content) |
Наследуемые свойства SimpleBar
Scrollbar наследует все свойства от SimpleBar:
- autoHide: Автоматически скрывать скроллбар (по умолчанию
true) - forceVisible: Принудительная видимость скроллбара (
'x'|'y'|true) - clickOnTrack: Разрешить клик по треку для прокрутки (по умолчанию
true) - scrollbarMinSize: Минимальный размер скроллбара в пикселях (по умолчанию
25) - scrollbarMaxSize: Максимальный размер скроллбара в пикселях (по умолчанию
0- без ограничений) - timeout: Время до автоскрытия в мс (по умолчанию
1000)
API методы
Scrollbar предоставляет доступ к методам SimpleBar через ref:
Доступные методы
- getScrollElement(): Получить DOM элемент для прокрутки
- getContentElement(): Получить DOM элемент контента
- recalculate(): Пересчитать размеры скроллбара (полезно при динамическом изменении контента)
- unMount(): Размонтировать SimpleBar
Примеры использования
В модальном окне
В боковой панели
Программная прокрутка
Динамическое обновление
С кастомными стилями
Чат интерфейс
Accessibility
Компонент Scrollbar сохраняет стандартное поведение прокрутки:
- Прокрутка с помощью клавиатуры (стрелки, Page Up/Down, Home/End)
- Прокрутка с помощью колеса мыши
- Прокрутка с помощью сенсорного экрана
- Поддержка screen readers
Производительность
Scrollbar оптимизирован для производительности:
- Использует нативную прокрутку браузера
- Минимальное влияние на производительность рендеринга
- Автоматическая оптимизация при динамическом контенте
Основано на
Scrollbar использует библиотеку simplebar-react для реализации кастомных скроллбаров.
