Détecter le changement de visibilité d'un élément avec JavaScript

La fonction ElViewChange() permet de détecter le changement de visibilité d'un élément dans la zone d'affichage (viewport).

L'API IntersectionObserver est utilisée pour observer les changements d'intersection entre l'élément et la zone d'affichage.

ElViewChange()

Retourne un objet détecteur de changement de visibilité d'un élément dans la zone d'affichage.

Syntaxe

new ElViewChange(element, option);

Paramètres

element(Node)

Le paramètre element de la fonction ElViewChange() définit l'élément HTML pour lequel un détecteur de visibilité sera créé.

option(Number)

Le paramètre option de la fonction ElViewChange() définit le nombre de valeurs du ratio de visibilité de l'élément, que le détecteur de visibilité prendra en compte.
Si cette propriété est omise, la valeur par défaut 20 sera utilisée.

Méthodes de l'instance

detecteur.addListener()

La méthode addListener() de la fonction ElViewChange() ajoute un écouteur au détecteur de changement de visibilité d'un élément.

Syntaxe

detecteur.addListener(ecouteur);

Paramètre

ecouteur(Function)

Le paramètre ecouteur de la méthode addListener() est un écouteur de changement de visibilité d'un élément, qui sera ajouté au détecteur. Il s'agit d'une fonction de rappel, dont l'argument sera le ratio de visibilité d'un élément.

detecteur.removeListener()

La méthode removeListener() de la fonction ElViewChange() supprime un écouteur du détecteur de changement de visibilité d'un élément.

Syntaxe

detecteur.removeListener(ecouteur);

Paramètre

ecouteur(Function)

Le paramètre ecouteur de la méthode removeListener() est un écouteur de changement de visibilité qui sera supprimé du détecteur.

detecteur.observe()

La méthode observe() de la fonction ElViewChange() active le détecteur de changement de visibilité d'un élément.

Syntaxe

detecteur.observe();

Paramètre

Aucun.

detecteur.unobserve()

La méthode unobserve() de la fonction ElViewChange() désactive le détecteur de changement de visibilité d'un élément.

Syntaxe

detecteur.unobserve();

Paramètre

Aucun.

var element = document.querySelector("#element");

var ecouteur = function(ratio) {
  console.log(ratio);
};

var detecteur = new ElViewChange(element);

    detecteur.addListener(ecouteur);
 // detecteur.removeListener(ecouteur);

    detecteur.observe();
 // detecteur.unobserve();

function ElViewChange(x,o){o=Number.parseFloat(o||20).toFixed(1);
var T=this,L=[],O=null,R=0,E=0,V=0,X=!1;T.observe=function(){
if(O===null){O=new IntersectionObserver(function(entries){
entries.forEach(function(entry){for(var i=0,j=L.length;i<j;i++){
L[i](Math.round(entry.intersectionRatio*10000)/100);}});},{
root:null,rootMargin:"0px",threshold:(function(){var a=[];
for(var i=1.0;i<=o;i++){a.push(i/o);}a.push(0.0);return a;})()});
O.observe(x);}};T.unobserve=function(){if(O!==null){O.unobserve();
L=[];}};T.addListener=function(f){L.push(f);};
T.removeListener=function(f){for(var i=0,j=L.length;i<j;i++){
if(L[i]===f){L.splice(i,1);i--;j--;}}};return T;}