Infinite Scroll
The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance of the list presented in the page.
<InfiniteScroll>
{#each array as data}
<li>{data}</li>
{/each}
</InfiniteScroll>
Usage
The component renders a ul and observe the elements of the list using the IntersectionObserver.
It sets the reference to the last element of the list after each re-render. Pay attention to not trigger unnecessary updates.
Properties
| Property | Description | Type | Default |
|---|
layout | Display of the rendered items. Defined by a class set on ul container. | list or grid | list |
disabled | If true, the infinite scroll stops observing for intersection and therefore, will stop calling the action to be performed. | boolean | false |
Slots
| Slot name | Description |
|---|
| Default slot | The list of elements. Should be li nodes. |
Events
| Event | Description | Detail |
|---|
nnsIntersect | Triggered each time the next observed item is intersecting. The event that can be use to call your action. | No detail |