I've set up a Vue component with the following structure:
<template>
<article>
<!-- This content spans several viewport heights: you *have* to scroll to get to the bottom -->
{{ content }}
</article>
<span ref="readMarker" />
</template>
// Utilizing Composition API and <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())
The main idea here is that when the user scrolls to the bottom of the content (rootMarker enters the view), the read event is emitted. The parent then loads another component using @read.once="loadMore".
However, I'm facing an issue where the event fires immediately upon loading the page, without any scrolling required. Subsequent instances also trigger the event right after loading each instance.
I have tried setting null as the root and moving the observer creation outside of onMounted, but it hasn't solved the problem.
It seems like there's a misunderstanding on my part regarding the behavior of IntersectionObserver, causing this confusion in functionality.