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.

List item and some text #0
List item and some text #1
List item and some text #2
List item and some text #3
List item and some text #4
List item and some text #5
List item and some text #6
Open in GitHub

Reverse
#

With reverse prop you can prepend content to your list. Might be useful in messenger windows.

List item and some text #0
List item and some text #1
List item and some text #2
List item and some text #3
List item and some text #4
List item and some text #5
List item and some text #6
Open in GitHub

Disabled
#

In case you need to prevent a list from loading more content, disabled prop is here for you.

List item and some text #0
List item and some text #1
List item and some text #2
List item and some text #3
List item and some text #4
List item and some text #5
Open in GitHub

Custom scroll target container
#

Provide either DOM element or CSS Selector to be used instead of default scroll container.

List item and some text #0
List item and some text #1
List item and some text #2
List item and some text #3
List item and some text #4
List item and some text #5
List item and some text #6
List item and some text #0
List item and some text #1
List item and some text #2
List item and some text #3
List item and some text #4
List item and some text #5
List item and some text #6
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
debounce

Debounce to be applied when listening to scroll event. Useful to prevent user from triggering loading multiple times.

Number

100

disabled

Won't trigger load even when scroll reached end. Useful to prevent further loading when there is no more items in list.

Boolean

false

load

Function that loads data. Should return Promise

() => Promise<any>

-

offset

Number of pixels to the end of va-infinite-scroll container at which the component should start loading more content in advance.

Number

500

preset

Named preset combination of component props.

String

-

reverse

Instead of bottom, top of the container would trigger loading.

Boolean

false

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.

String | Object

-

tag

Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases (ul > li and tr > td etc.).

String

"div"

Events #

NameDescription

onerror

Emits when load function thrown error

onload

Emits when load function finished with success

Slots #

NameDescription

default

The content to be scrolled

loading

Shown when content is fetching.

Css Variables #

NameDefault 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

Change log #