¿Por qué dice que element.getBoundingClientRect is not a function ? Realmente no sé qué hacer.
Aquí está mi JS:
const elementsFadeIn = document.querySelectorAll(".fade-in"); window.addEventListener("scroll", fadeIn); function fadeIn() { for (i in elementsFadeIn) { let element = elementsFadeIn[i]; let viewElement = element.getBoundingClientRect().top - window.innerHeight + 20; if (viewElement < 0) { element.classList.add("view-element"); } else { element.classList.remove("view-element"); } } }y mi codigo css:
.fade-in { transform: translateY(50px) translateZ(0); transition-delay: 0.7s; transition: 1s; opacity: 0; } .view-element{ opacity: 1; transform: translateY(0px) rotate(0deg) translateZ(0); }Llamó element.getBoundingClientRect().top en una lista de nodos y no en el elemento DOM .
Solución: acceda al elemento en el índice '0' de NodeList, obteniendo el elemento DOM. Recuerde que está utilizando querySelectorAll , por lo que su código debería ser:
let viewElement = element[0].getBoundingClientRect().topEl problema es que el bucle for ... in ... recorre todas las propiedades enumerable de un objeto. La NodeList que devuelve su querySelectorAll tiene claves numéricas para cada elemento contenido PERO también contiene el item de propiedades, keys , values , entries , forEach y length .
Pero estas propiedades adicionales no son HTMLElements, por lo tanto, no tienen el método getBoundingClientRect .
Verse a sí mismo:
const items = document.querySelectorAll('.item'); for (const item in items) { console.log('item: ', item); } <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> En su lugar, desea utilizar el bucle for ... of ...
const items = document.querySelectorAll('.item'); for (const item of items) { console.log('item: ', item); } <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div>Prueba esto:
function fadeIn() { const elementsToFade = document.querySelectorAll(".fade-in"); elementsToFade.forEach(element => { let viewElement = element.getBoundingClientRect().top - window.innerHeight + 20; if (viewElement < 0) { element.classList.add("view-element"); } else { element.classList.remove("view-element"); } }) }