Skip to content

Observe Your HTML Element

Check whatever HTML element in viewport

Bakunya

Created by / Bakunya

JS
const options = {
  root: null,
  rootMargin: '0px',
  threshold: 1
}
const callback = (entries, observer) => {
  const [entry] = entries
  if (entry.isIntersecting) {
    console.log('your element in viewport')

    //if you want to disconnect observe
    observer.unobserve(entry.target)
  }
}

const element = document.querySelector('.your-element')

const observer = new IntersectionObserver(callback, options)
observer.observe(element)
Edit on GitHub