Pretty scrollbar
Вспомогательный класс для отображения стилизованного скроллбара. Helper class for displaying a stylized scrollbar.
Import Permalink to "Import"
css
@import 'proxima-vue/styles/scrollbar.css';Use Permalink to "Use"
Просто добавьте специальный класс pretty‑scrollbar к любому контейнеру со скроллом: Just add a special pretty‑scrollbar class to any scrollable container:
html
<div class="pretty-scrollbar">
scroll content
</div>
<!-- show scrollbar thumb only on hover -->
<div class="pretty-scrollbar pretty-scrollbar_hover">
scroll content
</div>CSS Permalink to "CSS"
Вы можете cтилизовать cкроллбар через кастомные свойства: You can style the scrollbar through custom properties:
css
:root {
--pretty-scrollbar-size: 0.75em;
--pretty-scrollbar-width: var(--pretty-scrollbar-size);
--pretty-scrollbar-height: var(--pretty-scrollbar-size);
--pretty-scrollbar-track-color: rgba(0, 0, 0, 0);
--pretty-scrollbar-track-padding: 0.1875em;
--pretty-scrollbar-thumb-color: rgba(107, 107, 107, 0.5);
--pretty-scrollbar-thumb-radius: 0.75em;
}