如何使用Intersection Observer监听元素顶部和底部的进出视口事件

API 探路者

2026-9-30

解决方案

核心修改点

你当前的配置threshold: 0代表仅当元素可见比例为0%的时候触发回调，也就是只有元素顶部刚进入/刚离开视口的节点会触发事件。要监听更多进出状态，只需要调整阈值配置，再结合元素位置信息做判断即可。

完整实现代码

// 用WeakMap存储每个被观测元素的上一次可见比例，区分进出状态
const prevIntersectionRatio = new WeakMap()

this.observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      const target = entry.target
      const prevRatio = prevIntersectionRatio.get(target) ?? 0
      const currentRatio = entry.intersectionRatio
      prevIntersectionRatio.set(target, currentRatio)

      const viewportHeight = window.innerHeight
      const elRect = entry.boundingClientRect

      // 元素底部进入视口
      if (elRect.bottom <= viewportHeight && currentRatio > 0 && prevRatio < 1) {
        console.log('元素底部进入视口')
      }

      // 元素完全进入视口
      if (currentRatio === 1 && prevRatio < 1) {
        console.log('元素完全进入视口')
      }

      // 元素底部离开视口
      if (elRect.bottom > viewportHeight && currentRatio < 1 && prevRatio >= 1) {
        console.log('元素底部离开视口')
      }

      // 元素完全离开视口
      if (currentRatio === 0 && prevRatio > 0) {
        console.log('元素完全离开视口')
      }
    })
  },
  {
    rootMargin: "0px 0px 0px",
    root: null,
    threshold: [0, 1], // 可见比例达到0%、100%时都触发回调
  }
);