Skip to content

Instantly share code, notes, and snippets.

@hsnyc
Created February 25, 2021 18:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hsnyc/a0856caf1d500620a0f55fad95c74706 to your computer and use it in GitHub Desktop.
Save hsnyc/a0856caf1d500620a0f55fad95c74706 to your computer and use it in GitHub Desktop.
Intersection Observer to check if Elem is intersecting
/* ===
Intersection Observer API
Note: Use to do something when elem comes into viewport, among other things.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
===*/
let options = {
rootMargin: '0px',
threshold: 1.0
}
let callback = (entries, observer) => {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
// entry.boundingClientRect
// entry.intersectionRatio
// entry.intersectionRect
// entry.isIntersecting
// entry.rootBounds
// entry.target
// entry.time
if(entry.isIntersecting) {
console.log("Entry is intersecting");
//do whats needed when elem is in view
}
});
};
const observer = new IntersectionObserver(callback, options);
let target = document.querySelector('.statsContainer');
observer.observe(target);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment