Quiero mostrar algunas tarjetas en el scroll y para ello opté por utilizar un observador de intersección. Pero terminé con:
Error de tipo no capturado: no se pudo ejecutar 'observar' en 'IntersectionObserver': el parámetro 1 no es del tipo 'Elemento'.
Aquí hay un código de muestra de lo que estoy tratando de hacer =>
HTML:
<div class="card">demo</div> <div class="card">demo</div> <div class="card">demo</div> <div class="card">demo</div>JS:
const cards = document.querySelectorAll(".card"); const options = { root: null, threshold: 0.2 } const observer = new IntersectionObserver(function(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("appear-on-scroll"); observer.unobserve(entry.target); } else { return; } }); }, options); observer.observe(cards);La respuesta es recorrer la matriz que consta de nodos dos veces como:
const cards = document.querySelectorAll(".card"); const options = { root: null, threshold: 0.2 } const observer = new IntersectionObserver(function(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("appear-on-scroll"); observer.unobserve(entry.target); } else { return; } }); }, options); // second loop through cards.forEach(card => observer.observe(card));