typescript - IntersectionObserver 在元素进入 View 之前触发

Question

使用 Vue，我在组件中进行了以下设置:

<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())

想法是，当用户滚动到内容底部(rootMarker 进入 View )时，将发出 read 事件。当父级接收到该事件时，它会像这样加载另一个组件，依此类推 (@read.once="loadMore")。

但是，一旦我加载页面，事件就会立即触发，我根本没有时间滚动。每个实例加载后，后续实例的相同事件也会触发。

我还尝试使用 null 作为根并在 onMounted 之外创建观察者(onMounted 仅包含 observer.observe() 调用)，但这没有任何改变。

我显然误解了 IntersectionObserver 的某些内容，但我对这种行为真的很困惑。

Answer 1

事实证明，如果你想观察视口(viewport)本身的滚动，IntersectionObserver 的 root 必须是 document 本身，而在我的问题中我是尝试将 readMarker.value 设置为根，这样观察者只会查看它，当然，会立即将其视为“可见”。