Potiah

Appearance

Scroll Component ​

Component wrapper. Gathering all data-* attributes from Locomotive Scroll element.

Must be rendered inside ScrollView.

Component props ​

Property nameTypeReactiveReference / Default valueDescription
isstring-divSpecifies which HTML tag element to render.
inViewClassstring+is-inviewSpecifies which class to apply to an element when it is in view.
positionstring+data-scroll-position⬅️
offsetstring-data-scroll-offset⬅️
repeatboolean-data-scroll-repeat⬅️
speednumber-data-scroll-speed⬅️
cssProgressboolean+data-scroll-css-progress⬅️
ignoreFoldboolean+data-scroll-ignore-fold⬅️
enableTouchSpeedboolean+data-enable-touch-speed⬅️

Reactivity

If you are curious you can experiment and change properties directly on scrollElement.attributes objects:

js
scrollElement.attributes.neededProperty = 'changed value'
scrollElement.attributes.neededProperty = 'changed value'

How to get access to scrollElement you can see below in Expose section.

Events ​

Emit progress and intersect events. progress event handler will take IProgressEventPayload and intersect event handler will take IIntersectEventPayload.

See more types.ts

vue
<script setup lang="ts">
import { ScrollComponent } from "potiah";
import type { IProgressEventPayload, IIntersectEventPayload } from "potiah";

function handleProgress({ target, progress }: IProgressEventPayload) {
  // some work...
}

function handleIntersect({ target, way, from }: IIntersectEventPayload) {
  // and there
}
</script>

<template>
  <ScrollComponent @progress="handleProgress" />
  <ScrollComponent @intersect="handleIntersect" />
</template>
<script setup lang="ts">
import { ScrollComponent } from "potiah";
import type { IProgressEventPayload, IIntersectEventPayload } from "potiah";

function handleProgress({ target, progress }: IProgressEventPayload) {
  // some work...
}

function handleIntersect({ target, way, from }: IIntersectEventPayload) {
  // and there
}
</script>

<template>
  <ScrollComponent @progress="handleProgress" />
  <ScrollComponent @intersect="handleIntersect" />
</template>

Expose ​

All exposed properties available after component is ready. So you need to watch for ref.value?.scrollComponent to make sure of that and then access properties on exposed object.

  • inView - whether element in viewscreen
  • el - rendered HTML Element
  • scrollElement - ScrollElement

Pass inView to slot via v-slot.

vue
<script setup lang="ts">
import { watch } from "vue";

import { ScrollComponent } from "potiah";

const comp = ref<InstanceType<typeof ScrollComponent>>()
watch(
  () => comp.value?.scrollElement, 
  () => {
    comp.value.inView
    comp.value.el
    comp.value.scrollElement
})
</script>

<template>
  <ScrollComponent ref="comp" v-slot="{ inView }">
    <!--  slot components  -->
  </ScrollComponent>
</template>
<script setup lang="ts">
import { watch } from "vue";

import { ScrollComponent } from "potiah";

const comp = ref<InstanceType<typeof ScrollComponent>>()
watch(
  () => comp.value?.scrollElement, 
  () => {
    comp.value.inView
    comp.value.el
    comp.value.scrollElement
})
</script>

<template>
  <ScrollComponent ref="comp" v-slot="{ inView }">
    <!--  slot components  -->
  </ScrollComponent>
</template>