diff options
Diffstat (limited to 'src/lib/Lazy.svelte')
| -rw-r--r-- | src/lib/Lazy.svelte | 88 |
1 files changed, 44 insertions, 44 deletions
diff --git a/src/lib/Lazy.svelte b/src/lib/Lazy.svelte index 8bb180ac..da5b09a9 100644 --- a/src/lib/Lazy.svelte +++ b/src/lib/Lazy.svelte @@ -1,49 +1,49 @@ <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: number = 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: number = 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}> - <slot {visible} {percent} /> + <slot {visible} {percent} /> </div> |