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

Question

我目前正在使用交叉点观察器来检测元素何时离开视口。 它是这样设置的：

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)

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

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,
})

Answer 2

仅当您未将rootMargin值设置为 IntersectionObserver 中的选项时，检查entry.boundingClientRect.top才有效。 您应该检查entry.isIntersecting 。

如果您需要检查元素是否已通过视口并相交，请使用以下命令：

isIntersecting || boundingClientRect.top < 0

Answer 3

这很容易

let scrollY = window.scrollY;

new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    if (window.scrollY > scrollY) {
      // entry is above
    } else {
      // entry is below
    }
  }
  scrollY = window.scrollY;
}, {
  threshold: [0.4]
});