diff options
Diffstat (limited to 'src/lib/Lazy.svelte')
| -rw-r--r-- | src/lib/Lazy.svelte | 86 |
1 files changed, 43 insertions, 43 deletions
diff --git a/src/lib/Lazy.svelte b/src/lib/Lazy.svelte index fd08ed07..489793cc 100644 --- a/src/lib/Lazy.svelte +++ b/src/lib/Lazy.svelte @@ -1,47 +1,47 @@ <script lang="ts"> - import { onMount, onDestroy } from 'svelte'; - - export let top = 0; - export let bottom = 0; - export let left = 0; - export let right = 0; - export let steps = 100; - export let threshold = 0.01; - export let once = false; - - let element: Element; - let percent = 0; - let visible = false; - let observer: IntersectionObserver; - - const intersectPercent = ( - entries: IntersectionObserverEntry[], - observer: IntersectionObserver - ) => { - for (let entry of entries) - if (entry.target === element) { - percent = Math.round(entry.intersectionRatio * 100); - visible = entry.intersectionRatio >= threshold; - - if (visible && once) observer.unobserve(element); - - break; - } - }; - - onMount(() => { - if ('IntersectionObserver' in window) { - let options = { - rootMargin: `${top}px ${right}px ${bottom}px ${left}px`, - threshold: Array.from({ length: steps }, (_, i) => i / (steps - 1)) - }; - - observer = new IntersectionObserver(intersectPercent, options); - observer.observe(element); - } - }); - - onDestroy(() => observer?.unobserve(element)); +import { onMount, onDestroy } from "svelte"; + +export let top = 0; +export let bottom = 0; +export let left = 0; +export let right = 0; +export let steps = 100; +export let threshold = 0.01; +export let once = false; + +let element: Element; +let percent = 0; +let visible = false; +let observer: IntersectionObserver; + +const intersectPercent = ( + entries: IntersectionObserverEntry[], + observer: IntersectionObserver, +) => { + for (let entry of entries) + if (entry.target === element) { + percent = Math.round(entry.intersectionRatio * 100); + visible = entry.intersectionRatio >= threshold; + + if (visible && once) observer.unobserve(element); + + break; + } +}; + +onMount(() => { + if ("IntersectionObserver" in window) { + let options = { + rootMargin: `${top}px ${right}px ${bottom}px ${left}px`, + threshold: Array.from({ length: steps }, (_, i) => i / (steps - 1)), + }; + + observer = new IntersectionObserver(intersectPercent, options); + observer.observe(element); + } +}); + +onDestroy(() => observer?.unobserve(element)); </script> <div bind:this={element}> |