Les images n'apparaissent pas lorsque vous faites défiler une page (Javascript)

Question

Je suis un tutoriel en ligne, et celui-ci m'a laissé perplexe après quelques tentatives et recherches. Fondamentalement, quand un utilisateur fait défiler la page une image devrait apparaître quand il atteint environ 50% de sa hauteur à partir du bas.

Cependant, aucune de mes images n'apparaît? Dans le code lorsque je boucle à travers chaque image pour trouver sa hauteur à partir du bas, et console.log il me montre sa position sans problème.

const slideInAt = (window.scrollY + window.innerHeight); 

Lorsque je tente de diviser la hauteur de l'image en demi-console.log me montre NaN.

const slideInAt = (window.scrollY + window.innerHeight) - 
    sliderImage.height/2; 

Je ne suis pas sûr que cela empêche les images d'être affichées ou non? Voici la section complète du code dont je parle.

const sliderImages = document.querySelectorAll('.animation-element'); 

function checkSlide(e) { 
    sliderImages.forEach(sliderImage => { 
// half way through the image 
const slideInAt = (window.scrollY + window.innerHeight) - 
    sliderImage.height/2; 
// bottom of the image 
const imageBottom = sliderImage.offsetTop + sliderImage.height; 
const isHalfShown = slideInAt > sliderImage.offsetTop; 
const isNotScrolledPast = window.scrollY < imageBottom; 
if (isHalfShown && isNotScrolledPast) { 
    sliderImage.classList.add('in-view'); 
} else { 
    sliderImage.classList.remove('in-view'); 
} 

}); }

window.addEventListener('scroll', debounce(checkSlide)); 

La boucle est également montre toujours faux quand je défilement vers le haut et vers le bas dans DevTools. Mes excuses si je ne l'explique pas correctement, j'apprends toujours. Voici une version simplifiée de mon code en JSFiddle

Merci d'avance!

Answer 1

Vous essayez d'obtenir la hauteur d'une div, pas une image:

function checkSlide(e) { 
    sliderImages.forEach(sliderImage => { 
    // get the height of the image, not the div 
    const height = sliderImage.querySelector("img").height; 
    const slideInAt = (window.scrollY + window.innerHeight) - 
     height/2; 
    debugger; 
    // bottom of the image 
    const imageBottom = sliderImage.offsetTop + height; 
    const isHalfShown = slideInAt > sliderImage.offsetTop; 
    const isNotScrolledPast = window.scrollY < imageBottom; 
    if (isHalfShown && isNotScrolledPast) { 
     sliderImage.classList.add('in-view'); 
    } else { 
     sliderImage.classList.remove('in-view'); 
    } 
    }); 
} 

https://jsfiddle.net/5eog6z42/2/