Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
alwaysVisible: boolean - flag, indicating if scrollbar should be always visible.
delay: number - disappear (after container size change, after scroll) delay in ms.
dark: boolean - notifies scrollbar, that content has dark background.
tag: string - element tag (div as default).
speed: number - scroll speed for scrollTo, setScrollTop & setScrollLeft methods.
Emits:
on:scroll: object - payload contains information about current scroll state (vertical/horizontal position in px, vertical/horizontal scroll progress in px, vertical/horizontal scroll progress in %, height/width of the container in px).
Mehods:
getScroll - the same as on:scroll object.
scrollTo - scroll by { x, y } coordinates.
setScrollTop - set y scroll value (mb it's redundant).
setScrollLeft - set x scroll value (mb it's redundant).
Usage example:
<va-scrollbar always-visible class="classes overriding-classes">
Long content.
</va-scrollbar>
Live examples:
References:
Props:
alwaysVisible
: boolean - flag, indicating if scrollbar should be always visible.delay
: number - disappear (after container size change, after scroll) delay inms
.dark
: boolean - notifies scrollbar, that content has dark background.tag
: string - element tag (div as default).speed
: number - scroll speed forscrollTo
,setScrollTop
&setScrollLeft
methods.Emits:
on:scroll
: object - payload contains information about current scroll state (vertical/horizontal position inpx
, vertical/horizontal scroll progress inpx
, vertical/horizontal scroll progress in%
, height/width of the container inpx
).Mehods:
getScroll
- the same ason:scroll
object.scrollTo
- scroll by { x, y } coordinates.setScrollTop
- set y scroll value (mb it's redundant).setScrollLeft
- set x scroll value (mb it's redundant).Usage example:
Notes