Obtenir le ratio de visibilité d'un élément avec JavaScript

La fonction elView() permet d'obtenir le ratio de visibilité d'un élément dans la zone d'affichage (viewport).

Elle utilise la méthode getBoundingClientRect() qui peut s'avérer couteuse en performance avec une utilisation répétitive. Pour détecter le changement de ratio de visibilité d'un élément, il est préférable d'utiliser la fonction ElViewChange().

elView()

Retourne le ratio de visibilité d'un élément dans la zone d'affichage.

Syntaxe

elView(element);

Paramètre

element(Node)

Le paramètre element de la fonction elView() définit l'élément HTML pour lequel obtenir le ratio de visibilité.

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

elView(element);

// renvoie par exemple : 0.2
// (20%)

function elView(n) {
  var s = window.visualViewport,
    r = n.getBoundingClientRect(),
    h = r.top < 0 ? r.top + r.height : s.height - r.top,
    w = r.left < 0 ? r.left + r.width : s.width - r.left;
    h = h > r.height ? r.height : (h <= 0 ? 0 : h);
    w = w > r.width ? r.width : (w <= 0 ? 0 : w);
  return Math.round(h * w / (r.height * r.width) * 100) / 100;
}