Comment détecter quand un DIV devient visible dans la fenêtre avec jQuery ?

Répondre aux changements de visibilité d'un DIV à l'aide de jQuery

jQuery fournit un cadre robuste pour gérer les événements DOM, y compris les événements de visibilité de fenêtre. Dans cet article, nous explorerons comment déclencher des actions spécifiques lorsqu'un élément DIV particulier devient visible dans la fenêtre.

Création d'un gestionnaire d'événements "visible" personnalisé

Bien que jQuery ne fournisse pas nativement de gestionnaire d'événements « visible », nous pouvons implémenter une solution personnalisée à l'aide d'écouteurs d'événements. Voici comment :

$(function() {

  // Register a "isVisible" listener for the #contentDiv
  $('#contentDiv').on('isVisible', function() {
    alert("Div is now visible");
  });

  // Check for visibility changes and trigger the event
  $(window).scroll(function() {
    var topOfDiv = $('#contentDiv').offset().top;
    var bottomOfDiv = topOfDiv + $('#contentDiv').height();
    var topOfWindow = $(window).scrollTop();
    var bottomOfWindow = topOfWindow + $(window).height();

    if (topOfDiv >= topOfWindow && bottomOfDiv <= bottomOfWindow) {
      $('#contentDiv').trigger('isVisible');
    }
  });
});

Extension de la méthode .show()

Vous pouvez également étendre la méthode ".show()" existante pour déclencher une personnalisation Événement "afterShow" après que l'élément soit devenu visible. Voici un extrait de code pour cette approche :

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj = $(this),
        newCallback = function() {
          if ($.isFunction(oldCallback)) {
            oldCallback.apply(obj);
          }
          obj.trigger('afterShow');
        };

      // Trigger beforeShow event
      obj.trigger('beforeShow');

      // Use old show function with custom callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

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!