[JS]Intersection Observer API
Détecter, à l'aide de l'API Intersection Observer, si un élément est affiché dans la fenêtre pour déclencher une action suivant le besoin.
Scroller la page pour voir l'API Intersection Observer en action.
Code JavaScript
"use strict";
document.addEventListener("DOMContentLoaded", () => {
const allElements = document.querySelectorAll(".wrapper-content .content");
function fnObserver(entries, observer) {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("class-intersect");
// si l'on veut interrompre l'observation
//observer.unobserve(entry.target);
}
else {
entry.target.classList.remove("class-intersect");
}
}
}
const observer = new IntersectionObserver(fnObserver, {
root: null, // élément déterminant la zone d'affichage, null = viewport
threshold: .75, // si 75% de l'élément est dans la zone d'affichage
});
allElements.forEach((el) => {
observer.observe(el);
});
});