@empathyco/x-components/docs/API-reference/api/x-components.basescroll.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseScroll](./x-components.basescroll.md)

## BaseScroll variable

Base scroll component that depending on the user interactivity emits different events for knowing when the user scrolls, the direction of scroll and if user reaches the start or end.

**Signature:**

```typescript
_default: import("vue").DefineComponent<{
    distanceToBottom: {
        type: NumberConstructor;
        default: number;
    };
    firstElementThresholdPx: {
        type: NumberConstructor;
        default: number;
    };
    throttleMs: {
        type: NumberConstructor;
        default: number;
    };
    resetOnChange: {
        type: BooleanConstructor;
        default: boolean;
    };
    resetOn: {
        type: PropType<XEvent | XEvent[]>;
        default: () => string[];
    };
}, {
    throttledStoreScrollData: import("vue").ComputedRef<import("../..").ThrottleFunction<[]>>;
    baseScrollEl: import("vue").Ref<HTMLElement | undefined>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("scroll" | "scroll:at-start" | "scroll:almost-at-end" | "scroll:at-end" | "scroll:direction-change")[], "scroll" | "scroll:at-start" | "scroll:almost-at-end" | "scroll:at-end" | "scroll:direction-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    distanceToBottom: {
        type: NumberConstructor;
        default: number;
    };
    firstElementThresholdPx: {
        type: NumberConstructor;
        default: number;
    };
    throttleMs: {
        type: NumberConstructor;
        default: number;
    };
    resetOnChange: {
        type: BooleanConstructor;
        default: boolean;
    };
    resetOn: {
        type: PropType<XEvent | XEvent[]>;
        default: () => string[];
    };
}>> & {
    onScroll?: ((...args: any[]) => any) | undefined;
    "onScroll:at-start"?: ((...args: any[]) => any) | undefined;
    "onScroll:almost-at-end"?: ((...args: any[]) => any) | undefined;
    "onScroll:at-end"?: ((...args: any[]) => any) | undefined;
    "onScroll:direction-change"?: ((...args: any[]) => any) | undefined;
}, {
    distanceToBottom: number;
    firstElementThresholdPx: number;
    throttleMs: number;
    resetOnChange: boolean;
    resetOn: keyof import("../../wiring/events.types").XEventsTypes | (keyof import("../../wiring/events.types").XEventsTypes)[];
}, {}>
```