Start your content search
2 min read

WindowScroll

WindowScroll

The WindowScroll component listens to either the html or body DOM scroll events, and re-emits them as X Events. Additionally it also emits events related to the direction or current position of these elements scroll.

Props

Name Description Type Default
scrollableElement Tag to identify the main scrollable element. ScrollableElement 'html'
id Id to identify the component. string MainScrollId

Events

A list of events that the component will emit:

Vue Events

  • scroll: the event is emitted after the user scrolls in this container. The payload is the scroll top distance in pixels.
  • scroll:direction-change: the event is emitted when the user changes the scroll direction. The payload is the new scrolling direction.
  • scroll:at-start: the event is emitted when the user scrolls up to the initial position of the scroll.
  • scroll:almost-at-end: the event is emitted when the user is about to reach the bottom part of the scroll.
  • scroll:at-end: the event is emitted when the user has reached the bottom part of the scroll.

Example

The WindowScroll component manages the scroll state of the body or html elements. It does the necessary calculations for knowing the direction of scroll, if the scroll has reached its starting position, if it is about to reach its ending position or if it has already reached it end. Whenever this state changes, it emits the appropiate X Event to the rest of the application

Custom usage

Overriding the properties and using document scroll events.

<template>
  <WindowScroll
    @scroll="scroll"
    @scroll:direction-change="scrollDirectionChange"
    @scroll:at-start="scrollAtStart"
    @scroll:almost-at-end="scrollAlmostAtEnd"
    @scroll:at-end="scrollAtEnd"
    id="example-main-scroll"
    throttleMs="100"
    distanceToBottom="300"
    scrollableElement="body"
  />
</template>
<script>
  import { WindowScroll } from '@empathyco/x-components/scroll';
  export default {
    name: 'ScrollIdTest',
    components: {
      WindowScroll
    },
    methods: {
      scroll(position) {
        console.log('scroll', position);
      },
      scrollDirectionChange(direction) {
        console.log('scroll:direction-change', direction);
      },
      scrollAtStart() {
        console.log('scroll:at-start', isAtStart);
      },
      scrollAlmostAtEnd(isAlmostAtEnd) {
        console.log('scroll:almost-at-end', isAlmostAtEnd);
      },
      scrollAtEnd(isAtEnd) {
        console.log('scroll:at-end', isAtEnd);
      }
    }
  };
</script>

Using body and XEvents.

If we want to listen scroll body we should do some changes in css for body. This is an example, so therefore the height of body can be get any value that you want. The template style should have a similar styles the corresponding style for tag body like in the next example.

<template>
  <WindowScroll
    id="example-main-scroll"
    throttleMs="100"
    distanceToBottom="300"
    scrollableElement="body"
  />
</template>
<script>
  import { WindowScroll } from '@empathyco/x-components/scroll';
  export default {
    name: 'MainComponent',
    components: {
      WindowScroll
    },
    mounted() {
      this.$x.on('UserScrolled').subscribe(distance => {
        console.log(distance);
      });
      this.$x.on('UserChangedScrollDirection').subscribe(direction => {
        console.log(direction);
      });
      this.$x.on('UserReachedScrollStart').subscribe(isAtStart => {
        console.log(isAtStart);
      });
      this.$x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {
        console.log(isAlmostAtEnd);
      });
      this.$x.on('UserReachedScrollEnd').subscribe(isAtEnd => {
        console.log(isAtEnd);
      });
    }
  };
</script>
<style lang="scss">
  html {
    overflow: hidden;
  }
  body {
    overflow-y: auto;
    height: 100vh;
  }
</style>
Cookie-Less