javascript - 在与交叉点观察者相交离开时检测元素是高于还是低于视口(viewport)

Question

我目前正在使用 intersection observer检测元素何时离开视口(viewport)。它是这样设置的:

const el = document.querySelector('#el')
const observer = new window.IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    console.log('LEAVE')
    return
  }
  console.log('ENTER')
}, {
  root: null,
  threshold: 0,
})

observer.observe(el)

但我也想知道元素是在视口(viewport)上方还是下方。有没有办法做到这一点？

Answer 1

似乎(使用您的代码)entry.boundingClientRect.top当元素在屏幕下方时值为正，当元素在屏幕上方时值为负

在这里检查:
https://codepen.io/gui3/pen/VwwRORL

_ 编辑 _
经过多次尝试，这绝对有效

const observer = new window.IntersectionObserver(([entry]) => {
  console.log(entry.boundingClientRect.top)
  if (entry.isIntersecting) {
    console.log('Enter')
    position("VISIBLE") // do things if visible
    return
  }
  console.log('Leave')
  if (entry.boundingClientRect.top > 0) {
    position("BELOW") // do things if below
  } else {
    position("ABOVE") // do things if above
  }
}, {
  root: null,
  threshold: 0,
})