@empathyco/x-components/docs/API-reference/api/x-components.usescroll.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; [useScroll](./x-components.usescroll.md)

## useScroll() function

Composable to share Scroll logic.

**Signature:**

```typescript
export declare function useScroll(props: {
    distanceToBottom: number;
    firstElementThresholdPx: number;
    throttleMs: number;
    resetOnChange: boolean;
    resetOn: XEvent | XEvent[];
}, { emit }: SetupContext<any>, scrollEl: Ref<HTMLElement | undefined>): {
    throttledStoreScrollData: import("vue").ComputedRef<import("../..").ThrottleFunction<[]>>;
};
```

## Parameters

<table><thead><tr><th>

Parameter


</th><th>

Type


</th><th>

Description


</th></tr></thead>
<tbody><tr><td>

props


</td><td>

{ distanceToBottom: number; firstElementThresholdPx: number; throttleMs: number; resetOnChange: boolean; resetOn: [XEvent](./x-components.xevent.md) \| [XEvent](./x-components.xevent.md)<!-- -->\[\]; }


</td><td>

Composable props.


</td></tr>
<tr><td>

{ emit }


</td><td>

SetupContext&lt;any&gt;


</td><td>


</td></tr>
<tr><td>

scrollEl


</td><td>

Ref&lt;HTMLElement \| undefined&gt;


</td><td>

The scrolling container reference.


</td></tr>
</tbody></table>

**Returns:**

{ throttledStoreScrollData: import("vue").ComputedRef&lt;import("../..").[ThrottleFunction](./x-components.throttlefunction.md)<!-- -->&lt;\[\]&gt;&gt;; }

A throttled version of the function to store the scroll data.