@empathyco/x-components
Version:
Empathy X Components
51 lines (32 loc) • 1.74 kB
Markdown
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [infiniteScroll](./x-components.infinitescroll.md)
## infiniteScroll variable
Custom Vue directive for infinite scroll.
This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end, the IntersectionObserver triggers that both elements are intersecting.
How it works.
As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the xBus. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.
Usage.
The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: `html`<!-- -->: will set the <html> as the scrollable container. `body`<!-- -->: will set the <body> as the scrollable container. ID: will set the DOM element with the provided id as the scrollable container.
If no argument is provided the scrollable container fallbacks to the viewport.
**Signature:**
```typescript
infiniteScroll: Directive<HTMLElement, {
margin: number;
}>
```
## Example
How to use it.
```html
<ResultsList v-infinite-scroll:html>
```
```html
<ResultsList v-infinite-scroll:body>
```
```html
<BaseScroll id='scroll-test'>
<ResultsList v-infinite-scroll:scroll-test>
</BaseScroll>
```
```html
<ResultsList v-infinite-scroll="{ margin: 40 }">
```