Observer.svelte
1 <script lang="ts" context="module"> 2 export function intersection( 3 node: HTMLElement, 4 observer: IntersectionObserver | undefined, 5 ) { 6 if (!observer) return; 7 observer.observe(node); 8 return { 9 destroy() { 10 observer.unobserve(node); 11 }, 12 }; 13 } 14 </script> 15 16 <script lang="ts"> 17 import { onDestroy } from "svelte"; 18 19 let observer: IntersectionObserver | undefined = undefined; 20 let filesVisibility = new Set<string>(); 21 22 if ("IntersectionObserver" in window) { 23 observer = new IntersectionObserver(entries => { 24 entries.forEach(entry => { 25 if (entry.isIntersecting) { 26 filesVisibility = filesVisibility.add( 27 entry.target.id.replace("observer:", ""), 28 ); 29 } 30 }); 31 }); 32 } 33 34 onDestroy(() => { 35 if (observer) { 36 observer.disconnect(); 37 } 38 }); 39 </script> 40 41 <slot {observer} {filesVisibility} />