使用相交观察器检测元素是否在视口上方或下方

Question

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

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]
});

使用相交观察器检测元素是否在视口上方或下方

Detect whether element is above or below the viewport on intersect leave with intersection observer

javascript

intersection-observer