@empathyco/x-components
Version:
Empathy X Components
50 lines • 1.64 kB
TypeScript
import type { Directive } from 'vue';
/**
* 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.
*
* @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 }">
* ```
*
* @public
*/
export declare const infiniteScroll: Directive<HTMLElement, {
margin: number;
}>;
//# sourceMappingURL=infinite-scroll.d.ts.map