---

title: MainScrollItem

---

# MainScrollItem

Wrapper for elements contained in the MainScroll that should store/restore its
position.

## Props

| Name              | Description                                       | Type                             | Default            |
| ----------------- | ------------------------------------------------- | -------------------------------- | ------------------ |
| <code>item</code> | The item data. Used to set the scroll identifier. | <code>Identifiable</code>        | <code></code>      |
| <code>tag</code>  | The tag to render.                                | <code>string \| Component</code> | <code>'div'</code> |

## Slots

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

## Events

This component emits the following event:

- [`ScrollRestoreSucceeded`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## See it in action

This component has no predefined template. It renders whatever you decide using the `tag` prop. It's
main purpose is to help storing and restoring the scroll position so URLs can be shared, and also to
allow users to smoothly navigate back and forth.

To do so, it must be wrapped with the `MainScroll` component. In the following example we make use
of all of these components. The URL is modified as the user scrolls.

```vue
<template>
  <div>
    <UrlHandler />
    <SearchInput />

    <MainScroll>
      <Scroll>
        <ResultsList #result="{ item }">
          <MainScrollItem :item="item" tag="article">
            <BaseResultLink :item="item">
              <img :src="item.images[0]" />
              <p>{{ item.title }}</p>
            </BaseResultLink>
          </MainScrollItem>
        </ResultsList>
      </Scroll>
    </MainScroll>
  </div>
</template>

<script setup>
import {
  MainScroll,
  Scroll,
  MainScrollItem,
} from "@empathyco/x-components/scroll";
import { ResultsList } from "@empathyco/x-components/search";
import { SearchInput } from "@empathyco/x-components/search-box";
import { UrlHandler } from "@empathyco/x-components/url";
import { BaseResultLink } from "@empathyco/x-components";
</script>
```