Comment puis-je déterminer si un élément est visible après le défilement ?

Assurer la visibilité des éléments après le défilement

Identifier les éléments masqués par le défilement

Lors du chargement dynamique du contenu via AJAX, certains éléments peuvent rester masqués à moins que le défilement ne soit effectué . Déterminer leur visibilité au sein de la partie actuellement visible de la page devient crucial.

Solution

Pour vérifier si un élément est entièrement ou partiellement visible après le défilement, utilisez la fonction suivante :

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 étendue

Introduire une fonction utilitaire qui prend en charge la visibilité complète et partielle vérifie :

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));
    }
  }
};

Utilisation améliorée

Améliorez le code avec cette fonction utilitaire :

var Utils = new Utils();

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

if (isElementInView) {
  console.log('in view');
} else {
  console.log('out of view');
}

En implémentant ces fonctions, vous pouvez détecter efficacement la visibilité des éléments après le défilement et répondez en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!