Usando Vue, tengo la siguiente configuración en un componente:

 <template> <article> <!-- This content spans several viewport heights: you *have* to scroll to get to the bottom --> {{ content }} </article> <span ref="readMarker" /> </template>

 // Composition API with <script setup> const emit = defineEmit<{ (e: "read", value: number): void }>() const readMarker = ref<HTMLSpanElement>() let observer: IntersectionObserver; onMounted(() => { if (!readMarker.value) return observer = new IntersectionObserver( () => { emit("read", 1) }, { root: readMarker.value, }, ) observer.observe(readMarker.value) }) onDeactivated(() => observer.disconnect())

La idea es que cuando el usuario se desplaza hasta la parte inferior del contenido ( rootMarker ingresa a la vista), se emite el evento de read . Cuando el padre recibe el evento, carga otro componente como este y así sucesivamente ( @read.once="loadMore" ).

Sin embargo, tan pronto como cargo la página, el evento se activa de inmediato, sin que yo tenga tiempo de desplazarme. El mismo evento para instancias posteriores también se activa tan pronto como se carga cada instancia.

También intenté usar null como raíz y crear el observador fuera de onMounted (con onMounted solo conteniendo la llamada de observer.observe() ), pero eso no cambió nada.

Claramente he entendido mal algo sobre IntersectionObserver, pero estoy realmente confundido acerca de este comportamiento.