2024-08-21_1530

JaiLu pour la première fois la page de la Web API nommée Intersection Observer API.

Dans un projet Svelte, je crée dynamiquement un composant qui est inséré dans un élément non Svelte :

component = new myComponent({
	target: element,
	props: {
		foo: bar
	}
});

Cette Web API m’a permis de déterminer la position d’un composant lorsque celui-ci est réellement attaché à la page web.

<script lang="js">
    import { onMount } from "svelte";
    export let rootElement;
    onMount(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                  entries.forEach(entry => {
                    if (entry.isIntersecting) {
						console.log(entry.boundingClientRect);
                        observer.disconnect();
                    }
                  });
            }
        );
        observer.observe(rootElement);
    });
</script>
 
<span bind:this={rootElement}>
    ...
</span>