| Prop name | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|
| contents | let |
Yes | Element |
undefined |
the area scrolled by host element. |
| viewport | let |
Yes | Element |
undefined |
the scrolling host element. |
| hideAfter | let |
No | number |
1000 |
milliseconds to keep scrollbar visible. |
| alwaysVisible | let |
No | boolean |
false |
make scrollbar always visible if the content is scrollable. |
| initiallyVisible | let |
No | boolean |
false |
make scrollbar initially visible if the content is scrollable. after you interact with your scrollable contents, scrollbar fallback to the default visibility behavior. |
| margin | let |
No | { top?: number, right?: number, buttom?: number, left?: number } |
{} |
margin (px) from viewport top, right, bottom and left. |
| vTrackIn | let |
No | (node: HTMLElement, params: any) => import('svelte/transition').TransitionConfig |
(node) => fade(node, { duration: 100 }) |
svelte transition to show track in. |
| vTrackOut | let |
No | (node: HTMLElement, params: any) => import('svelte/transition').TransitionConfig |
(node) => fade(node, { duration: 300 }) |
svelte transition to hide track out. |
| vThumbIn | let |
No | (node: HTMLElement, params: any) => import('svelte/transition').TransitionConfig |
(node) => fade(node, { duration: 100 }) |
svelte transition to show thumb in. |
| vThumbOut | let |
No | (node: HTMLElement, params: any) => import('svelte/transition').TransitionConfig |
(node) => fade(node, { duration: 300 }) |
svelte transition to hide thumb out. |
None.
| Event name | Type | Detail |
|---|---|---|
| show | dispatched | -- |
| hide | dispatched | -- |
| Prop name | Kind | Reactive | Type | Default value | Description |
|---|---|---|---|---|---|
| width | let |
No | string |
'10rem' |
-- |
| height | let |
No | string |
'10rem' |
-- |
| hideAfter | let |
No | number |
1000 |
-- |
| alwaysVisible | let |
No | boolean |
false |
-- |
| initiallyVisible | let |
No | boolean |
false |
-- |
| margin | let |
No | { top?: number, right?: number, buttom?: number, left?: number } |
{} |
margin (px) from viewport top, right, bottom and left. |
| vTrackIn | let |
No | (node: HTMLElement, params: any) => import('svelte/transition').TransitionConfig |
(node) => fade(node, { duration: 100 }) |
-- |
| vTrackOut | let |
No | (node: HTMLElement, params: any) => import('svelte/transition').TransitionConfig |
(node) => fade(node, { duration: 300 }) |
-- |
| vThumbIn | let |
No | (node: HTMLElement, params: any) => import('svelte/transition').TransitionConfig |
(node) => fade(node, { duration: 100 }) |
-- |
| vThumbOut | let |
No | (node: HTMLElement, params: any) => import('svelte/transition').TransitionConfig |
(node) => fade(node, { duration: 300 }) |
-- |
| Slot name | Default | Props | Fallback |
|---|---|---|---|
| -- | Yes | -- | -- |
| Event name | Type | Detail |
|---|---|---|
| show | forwarded | -- |
| hide | forwarded | -- |