1 min read

MainScrollItem

MainScrollItem

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

Props

Name Description Type Default
item The item data. Used to set the scroll identifier. Identifiable
tag The tag to render. union () => NoElement

Slots

Name Description Bindings
(name - type - description)
default None

Events

This components emits the following events:

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.

<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>
  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';
  export default {
    name: 'ScrollItemDemo',
    components: {
      Scroll,
      ResultsList,
      MainScroll,
      MainScrollItem,
      SearchInput,
      UrlHandler
    }
  };
</script>