1 min read

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

Events

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

Slots

Name	Description	Bindings (name - type - description)
`default`		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.

<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).

<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.

<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.