Comment vérifier si un élément est visible après défilement?

Question

Je charge des éléments via AJAX. Certains d'entre eux ne sont visibles que si vous faites défiler la page. Est-il possible de savoir si un élément est maintenant visible à l'écran ?

Answer 1

Cela devrait faire l'affaire :

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Fonction utilitaire simple Cela vous permettra d'appeler une fonction utilitaire qui accepte l'élément que vous recherchez et si vous voulez que l'élément soit entièrement visible ou partiellement.

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Utilisation

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('à la vue');
} else {
    console.log('hors de la vue');
}

Answer 2

Cette réponse en Vanilla:

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Seuls les éléments complètement visibles renvoient true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Les éléments partiellement visibles renvoient true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

Answer 3

Mise à jour : utiliser IntersectionObserver

---

La meilleure méthode que j'ai trouvée jusqu'à présent est le plugin jQuery appear. Ça fonctionne à merveille.

Imite un événement "appear" personnalisé, qui se déclenche lorsque un élément apparaît à l'écran ou devient visible pour l'utilisateur.

$('#foo').appear(function() {
  $(this).text('Bonjour tout le monde');
});

Ce plugin peut être utilisé pour empêcher des requêtes inutiles pour du contenu qui est caché ou hors de la zone visible.

Answer 4

Voici ma solution JavaScript pure qui fonctionne même si elle est cachée à l'intérieur d'un conteneur scrollable.

Démo ici (essayez de redimensionner la fenêtre également)

var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode
  // Vérifier si le bas de l'élément est hors de la page
  if (rect.bottom < 0) return false
  // Vérifier si c'est dans le viewport du document
  if (top > document.documentElement.clientHeight) return false
  do {
    rect = el.getBoundingClientRect()
    if (top <= rect.bottom === false) return false
    // Vérifier si l'élément est hors de vue en raison d'un défilement du conteneur
    if ((top + height) <= rect.top) return false
    el = el.parentNode
  } while (el != document.body)
  return true
};

MODIFICATION 2016-03-26 : J'ai mis à jour la solution pour tenir compte du défilement passé de l'élément donc il est caché au-dessus du haut du conteneur scrollable. MODIFICATION 2018-10-08 : Mise à jour pour gérer quand il est défilé hors de vue au-dessus de l'écran.

Answer 5

Le plugin jQuery Waypoints se comporte très bien ici.

$('.entry').waypoint(function() {
   alert('Vous avez fait défiler jusqu'à une entrée.');
});

Il y a quelques exemples sur le site du plugin.