Add smooth scroll globally

This commit is contained in:
2022-07-27 15:56:14 +02:00
parent 378c707d57
commit 0dba9b78c3
5 changed files with 156 additions and 64 deletions

View File

@@ -0,0 +1,36 @@
<script lang="ts">
import { browser } from '$app/env'
import { onMount } from 'svelte'
import Lenis from '@studio-freight/lenis'
import { smoothScroll } from '$utils/stores'
let smoothScrollRAF = 0
// Setup smooth scroll
if (browser) {
$smoothScroll = new Lenis({
lerp: 0.1,
smooth: true,
direction: 'vertical',
})
}
// Lenis RAF
const update = () => {
$smoothScroll.raf()
smoothScrollRAF = requestAnimationFrame(update)
}
onMount(() => {
// Enable smooth scroll
requestAnimationFrame(update)
// Destroy
return () => {
cancelAnimationFrame(smoothScrollRAF)
$smoothScroll.destroy()
}
})
</script>