Comment puis-je déterminer si un élément est visible après le défilement ?-js tutoriel-php.cn

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

Susan Sarandon

Libérer： 2024-12-19 03:19:09

original

1004 Les gens l'ont consulté

How Can I Determine if an Element is Visible After Scrolling?

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!