Infinite Scroll #
The va-infinite-scroll component is a wrapper component which is intended to be used to create lists with dynamically added content. It provides rich interface to customize scrolling behavior and much more.
Examples #
Default #
Just wrap your content in va-infinite-scroll component and provide load callback, and you'll see it's called each time list is scrolled till the bottom.
Reverse #
With reverse prop you can prepend content to your list. Might be useful in messenger windows.
Disabled #
In case you need to prevent a list from loading more content, disabled prop is here for you.
Custom scroll target container #
Provide either DOM element or CSS Selector to be used instead of default scroll container.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| debounce | Debounce to be applied when listening to scroll event. Useful to prevent user from triggering loading multiple times. |
|
|
| disabled | Won't trigger load even when scroll reached end. Useful to prevent further loading when there is no more items in list. |
|
|
| load | Function that loads data. Should return Promise |
| - |
| offset | Number of pixels to the end of |
|
|
| preset | Named preset combination of component props. |
| - |
| reverse | Instead of bottom, top of the container would trigger loading. |
|
|
| scrollTarget | The element to be used as a scroll container instead of default one. Could be CSS selector or Element. When not set - direct wrapper will be used as a scroll container. |
|
|
| tag | Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases ( |
|
|
Events #
| Name | Description |
|---|---|
onerror | Emits when |
onload | Emits when |
Slots #
| Name | Description |
|---|---|
default | The content to be scrolled |
loading | Shown when content is fetching. |
Css Variables #
| Name | Default Value |
|---|---|
| --va-infinite-scroll-display | flex |
| --va-infinite-scroll-flex-direction | column |
| --va-infinite-scroll-spinner-default-width | 100% |
| --va-infinite-scroll-spinner-default-min-height | 70px |
| --va-infinite-scroll-reversed-flex-direction | column-reverse |