vuestic-ui
vuestic-ui copied to clipboard
VaScrollbar component rework
Live examples:
- https://quasar.dev/vue-components/scroll-area
- https://element-plus.org/en-US/component/scrollbar.html#max-height
References:
- https://www.jqwidgets.com/vue-components-documentation/documentation/jqxscrollbar/vue-scrollbar-getting-started.htm
- https://binaryify.github.io/vue-custom-scrollbar/en/#how-to-use
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:
<va-scrollbar always-visible class="classes overriding-classes">
Long content.
</va-scrollbar>
Notes
- See also #2400
add to my to-do list ✅
We might want to investigate scrollbar customization possibility in context of this task.