Potiah

Appearance

Scroll View ​

Main component.

Layout change

Due to LocomotiveScroll implementation it is not possible to change layout.

To prevent unexpected behaviour do not use conditional rendering (v-if) or change layout (v-show) inside view on components/elements that have width/height, change these properties dynamically (after rendering) of elements within ScrollView IF there is ScrollComponents.

Solution depends on the bravery of LocomotiveScroll team and may come later, thanks them for their work!

Props ​

Property nameTypeReactiveDefault valueDescription
rootboolean-falseSpecifies when the component will wrap and listen to the scroll event on the entire document or create wrapper & content elements.
cssProgressboolean+falseSpecifies whether or not to display the progress value on the root element in the --view-progress CSS custom property (variable). Possible values are 0 to 1.
cssDirectionboolean+falseSame as cssProgress ⬆️, but in --scroll-direction property. Possible values are -1 (up), 1 (down).
wrapperIsstring-divSpecifies which HTML tag element to render.
contentIsstring-div⬆️
horizontalboolean-falseScroll orientation. Default - vertical
durationnumber+1Scroll duration. See more here

Other props are options from Lenis, options from LocomotiveScroll.

Non-reactive

All other props are non-reactive. If you are curious you can experiment and change properties directly on LocomotiveScroll.lenisOptions and Lenis.options objects:

js
potiah.scroll.lenisOptions.neededProperty = 'changed value'
potiah.scroll.lenisInstance.options.neededProperty = 'changed value'
potiah.scroll.lenisOptions.neededProperty = 'changed value'
potiah.scroll.lenisInstance.options.neededProperty = 'changed value'

Events ​

Emit lenis-scroll event. Single argument passed to handler is Lenis.

vue
<script setup lang="ts">
import type Lenis from '@studio-freight/lenis';
import { ScrollView } from "potiah";

function onLenisScroll({ progress, ...otherLenisProperties }: Lenis) {
  // do what you want  
}
</script>

<template>
  <ScrollView @lenis-scroll="onLenisScroll">
    <!-- content -->
  </ScrollView>
</template>
<script setup lang="ts">
import type Lenis from '@studio-freight/lenis';
import { ScrollView } from "potiah";

function onLenisScroll({ progress, ...otherLenisProperties }: Lenis) {
  // do what you want  
}
</script>

<template>
  <ScrollView @lenis-scroll="onLenisScroll">
    <!-- content -->
  </ScrollView>
</template>

Access to elements ​

If you need access to wrapper or/and content elements you can find it on Lenis instance after scroll is ready.

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

import { usePotiah } from "potiah";

const { potiah } = usePotiah();

watch(() => potiah.scroll, (s) => {
  if (s) {
    potiah.scroll.lenisInstance.rootElement
    // or
    potiah.scroll.lenisInstance.options.wrapper

    potiah.scroll.lenisInstance.options.content
  }
}, { immediate: true })
</script>
<script setup lang="ts">
import { watch } from "vue";

import { usePotiah } from "potiah";

const { potiah } = usePotiah();

watch(() => potiah.scroll, (s) => {
  if (s) {
    potiah.scroll.lenisInstance.rootElement
    // or
    potiah.scroll.lenisInstance.options.wrapper

    potiah.scroll.lenisInstance.options.content
  }
}, { immediate: true })
</script>