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.	string | Component	'div'

Slots

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

Events

This components emits the following events:

• ScrollRestoreSucceeded (opens new window)

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>