Il y a plus de 30 réponses à cette question, et aucune d'entre elles n'utilise la solution JS incroyablement simple et pure que j'utilise. Il n'est pas nécessaire de charger jQuery juste pour résoudre ce problème, car beaucoup d'autres poussent.
Afin de savoir si l'élément se trouve dans la fenêtre, nous devons d'abord déterminer la position des éléments dans le corps. Nous n'avons pas besoin de le faire récursivement comme je le pensais autrefois. Au lieu de cela, nous pouvons utiliser element.getBoundingClientRect()
.
pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
Cette valeur est la différence Y entre le haut de l'objet et le haut du corps.
Nous devons alors dire si l'élément est en vue. La plupart des implémentations demandent si l'élément complet se trouve dans la fenêtre d'affichage, c'est donc ce que nous allons couvrir.
Tout d' abord, la position de haut de la fenêtre est: window.scrollY
.
Nous pouvons obtenir la position inférieure de la fenêtre en ajoutant la hauteur de la fenêtre à sa position supérieure:
var window_bottom_position = window.scrollY + window.innerHeight;
Permet de créer une fonction simple pour obtenir la position supérieure de l'élément:
function getElementWindowTop(elem){
return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}
Cette fonction renverra la position supérieure de l'élément dans la fenêtre ou elle reviendra 0
si vous lui passez autre chose qu'un élément avec la .getBoundingClientRect()
méthode. Cette méthode existe depuis longtemps, vous ne devriez donc pas avoir à vous soucier que votre navigateur ne la supporte pas.
Maintenant, la première position de notre élément est:
var element_top_position = getElementWindowTop(element);
Et la position inférieure de l'élément ou est:
var element_bottom_position = element_top_position + element.clientHeight;
Nous pouvons maintenant déterminer si l'élément se trouve dans la fenêtre en vérifiant si la position inférieure de l'élément est inférieure à la position supérieure de la fenêtre et en vérifiant si la position supérieure de l'élément est supérieure à la position inférieure de la fenêtre:
if(element_bottom_position >= window.scrollY
&& element_top_position <= window_bottom_position){
//element is in view
else
//element is not in view
De là, vous pouvez effectuer la logique pour ajouter ou supprimer une in-view
classe sur votre élément, que vous pourrez ensuite gérer plus tard avec des effets de transition dans votre CSS.
Je suis absolument étonné de ne pas avoir trouvé cette solution ailleurs, mais je pense que c'est la solution la plus propre et la plus efficace, et elle ne vous oblige pas à charger jQuery!