---

title: BaseScroll

---

# BaseScroll

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.

## Props

| Name                                 | Description                                                                                                                                                                                                                  | Type                            | Default                                                                                                                                                                                                                       |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>distanceToBottom</code>        | Distance to the end of the scroll that when reached will emit the<br />`scroll:about-to-end` event.                                                                                                                          | <code>number</code>             | <code>100</code>                                                                                                                                                                                                              |
| <code>firstElementThresholdPx</code> | Positive vertical distance to still consider that the element is the first one visible.<br />For example, if set to 100, after scrolling 100 pixels, the first rendered element<br />will still be considered the first one. | <code>number</code>             | <code>100</code>                                                                                                                                                                                                              |
| <code>throttleMs</code>              | Time duration to ignore the subsequent scroll events after an emission.<br />Higher values will decrease events precision but can prevent performance issues.                                                                | <code>number</code>             | <code>100</code>                                                                                                                                                                                                              |
| <code>resetOnChange</code>           | If true (default), sets the scroll position to the top when certain events are emitted.                                                                                                                                      | <code>boolean</code>            | <code>true</code>                                                                                                                                                                                                             |
| <code>resetOn</code>                 | List of events that should reset the scroll when emitted.                                                                                                                                                                    | <code>XEvent \| XEvent[]</code> | <code>() => [<br /> 'SearchBoxQueryChanged',<br /> 'SortChanged',<br /> 'SelectedFiltersChanged',<br /> 'SelectedFiltersForRequestChanged',<br /> 'SelectedRelatedTagsChanged',<br /> 'UserChangedExtraParams',<br />]</code> |

## Events

| Event name              | Properties | Description |
| ----------------------- | ---------- | ----------- |
| scroll                  |            |
| scroll:at-start         |            |
| scroll:almost-at-end    |            |
| scroll:at-end           |            |
| scroll:direction-change |            |

## Slots

| Name                 | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> |             | None                                      |

## Examples

### Basic usage

This is a highly configurable component that manages the scroll state of an element and emits events
for scroll position, direction, when reaching the start or end, and when about reaching the end.

```vue
<template>
  <BaseScroll
    @scroll="onScroll"
    @scroll:direction-change="onDirectionChange"
    @scroll:at-start="onAtStart"
    @scroll:almost-at-end="onAlmostAtEnd"
    @scroll:at-end="onAtEnd"
    :throttleMs="1000"
    :distanceToBottom="200"
  >
    <div class="content-scroll">
      <span>content1</span>
      <span>content2</span>
    </div>
  </BaseScroll>
</template>

<script setup>
import { BaseScroll } from "@empathyco/x-components";
function onScroll(position) {
  console.log("scroll", position);
}
function onDirectionChange(direction) {
  console.log("scroll:direction-change", direction);
}
function onAtStart() {
  console.log("scroll:at-start");
}
function onAlmostAtEnd(distance) {
  console.log("scroll:almost-at-end", distance);
}
function onAtEnd() {
  console.log("scroll:at-end");
}
</script>
```

### Avoid reset scroll on query change

Set `resetOnChange` to `false` to prevent scroll reset on query change (default is `true`).

```vue
<template>
  <BaseScroll @scroll="onScroll" :resetOnChange="false">
    <div class="content-scroll">
      <span>content1</span>
      <span>content2</span>
    </div>
  </BaseScroll>
</template>

<script setup>
import { BaseScroll } from "@empathyco/x-components";
function onScroll(position) {
  console.log("scroll", position);
}
</script>
```

### Reset scroll

Configure which events reset the scroll position using the `resetOn` prop.

```vue
<template>
  <BaseScroll @scroll="onScroll" :resetOn="resetScrollEvents">
    <div class="content-scroll">
      <span>content1</span>
      <span>content2</span>
    </div>
  </BaseScroll>
</template>

<script setup>
import { BaseScroll } from "@empathyco/x-components";
const resetScrollEvents = ["UserAcceptedAQuery"];
function onScroll(position) {
  console.log("scroll", position);
}
</script>
```

## Vue Events

- `scroll`: emitted after the user scrolls in this container. Payload: scroll top distance in pixels.
- `scroll:direction-change`: emitted when the user changes the scroll direction. Payload: new direction.
- `scroll:at-start`: emitted when the user scrolls to the initial position.
- `scroll:almost-at-end`: emitted when the user is about to reach the bottom.
- `scroll:at-end`: emitted when the user has reached the bottom.