Vue中IntersectionObserver未等元素进入视口就触发问题排查

• 错误配置了IntersectionObserver的root参数
  root参数用于指定相交检测的参照滚动容器，你将其设置为要观察的readMarker元素本身，被观察元素永远处于自身的视口范围内，因此调用observe方法的瞬间就会触发回调。
• 回调函数未做相交状态校验
  IntersectionObserver的回调会在调用observe()时默认触发一次，无论元素是否进入视口，你的代码没有对回调传入的元素相交状态做判断，直接触发了emit，就算你把root改为null也会出现误触发。

JS逻辑部分 #

// Composition API with <script setup>
import { ref, onMounted, onDeactivated, onUnmounted } from 'vue'

const emit = defineEmits<{
  (e: "read", value: number): void
}>()

const readMarker = ref<HTMLSpanElement | null>(null)
let observer: IntersectionObserver | null = null;

onMounted(() => {
  if (!readMarker.value) return

  observer = new IntersectionObserver(
    (entries) => {
      // 仅当元素真正进入参照视口时才触发事件
      const entry = entries[0]
      if (entry.isIntersecting) {
        emit("read", 1)
        // 触发一次后就停止观察，适配父组件用once绑定的场景
        observer?.unobserve(entry.target)
      }
    },
    {
      // 参照顶级视口无需显式指定root，默认就是null
      threshold: 0.1 // 只要有10%进入视口就触发，避免空元素高度为0导致检测失效
    }
  )
  observer.observe(readMarker.value)
})

// 页面缓存失活和组件卸载时都清理观察器，避免内存泄漏
const clearObserver = () => {
  if (observer) {
    observer.disconnect()
    observer = null
  }
}
onDeactivated(clearObserver)
onUnmounted(clearObserver)

模板部分可选优化 #

给标记元素加最小高度，避免空元素高度为0导致相交检测失效：

<template>
  <article>
    {{ content }}
  </article>
  <span ref="readMarker" style="display: block; height: 1px;" />
</template>

如果你是在某个自定义的滚动容器（比如设置了overflow: auto的内部div）里做滚动加载，才需要把root参数设置为对应的滚动容器DOM元素。

内容的提问来源于stack exchange，提问作者theberzi