LocomotiveScroll methods about potiah

[somespecialone]

Hi! You can access instance of the LocomotiveScroll with scroll property.

const { potiah } = usePotiah()

potiah.scroll.destroy()
// anything you want to

[cmarcelly]

Thank you, I'm able to access the instance but it looks that some methods are missing.

I'm working in a Nuxt 3 environment.

Here is the full list : https://scroll.locomotive.ca/docs/#/methods

It looks like start() and stop() methods for example are not available.

Or maybe I'm doing something wrong...

Also, It's weird I cannot run the scrollTo() method in the onMounted hook. But it works on click event... Here is my code:

<template>
    <section>
        <div class="section1">
			<h1>Section 1</h1>
			<button @click="potiah.scrollTo('.section2')">Click</button>
		</div>
		<div class="section2">
			<h1>
				Section 2
			</h1>
		</div>
	</section>
</template>

<script lang="ts" setup>
	import { usePotiah } from 'potiah'

	const { potiah } = usePotiah()

	onMounted(() => {
		requestAnimationFrame(() => {
			potiah.scrollTo(100)
		});
	})
</script>

<style scoped>
	.section1 {
		height: 100dvh;
		background: green;
	}

	.section2 {
		height: 100dvh;
		background: red;
	}
</style>

Thank you very much!

[somespecialone]

My bad - I missed the scroll property access in the previous message (already fixed).
To access the LocomotiveScroll instance, you need to run your code after scroll is ready. scrollTo will not work in onMounted in your example because LocomotiveScroll is not created yet (there is no guarantee even in raf callback).
You can look there how to do it.
To clarify, all the methods you are looking for are on the scroll property.

[cmarcelly]

Perfect! Thank you so much it's works fine now and I understand better.

Really great job!