Controllare se un elemento è visibile nel Viewport in Javascript

Come facciamo a sapere se un elemento del DOM è visibile (parzialmente o completamente) nel Viewport del browser? In poche parole, come possiamo sapere se uno o più elementi sono visibili all’utente mentre effettua lo scrolling?

E’ una domanda posta migliaia di volte da utenti di tutto il mondo. Anche se esistono svariati plugin che fanno la stessa cosa, vediamo di risolvere con poche righe Javascript utilizzando jQuery.

Partiamo subito dal codice JS. Scriveremo due piccole funzioni per estendere le funzionalità di jQuery. La prima, ci dirà se l’elemento è visibile, anche parzialmente, nel Viewport, mentre la seconda se l’elemento è completamente visibile nel Viewport. Naturalmente restituiscono un valore bool .

// Visibilità parziale
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};



// Visibilità completa
$.fn.isFullyInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementTop >= viewportTop && elementBottom <= viewportBottom;
};

La funzione isInViewport() controlla che l’offset superiore dell’elemento elementTo  sia minore dell’altezza della finestra. In questo modo possiamo essere certi che l’elemento è visibile, parzialmente.

La seconda funzione, isFullyInViewport() invece, aggiunge un ulteriore controllo, ovvero che l’ultimo pixel del nostro elemento sia minore, cioè sia incluso nel Viewport. Questo ci garantirà che l’elemento è completamente visualizzato dall’utente.

A questo punto, dobbiamo assicurarci di controllare la visibilità completa o parziale degli elementi sull’evento scroll  di jQuery:

$(window).on(‘resize scroll’, function() {

    var elemento = $('#elemento');

    if (elemento.isInViewport()) {
       console.log("L'elemento è visibile");
    }

    if (elemento.isFullyInViewport()) {
       console.log("L'elemento è completamente visibile");
    }

});

Attenzione: tutto questo non c’entra nulla con il selettore :visible  di jQuery. Questo selettore, infatti, ci dice soltanto se l’elemento, in base alle sue property CSS è visibile.