Infinite Scroll #
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.
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 prop you can prepend content to your list. Might be useful in messenger windows.
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.
Debounce to be applied when listening to scroll event. Useful to prevent user from triggering loading multiple times.
Won't trigger load even when scroll reached end. Useful to prevent further loading when there is no more items in list.
Function that loads data. Should return Promise
Number of pixels to the end of
Named preset combination of component props.
Instead of bottom, top of the container would trigger loading.
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.
Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (
The content to be scrolled
Shown when content is fetching.
Css Variables #