Wie erkennt man mit jQuery, wann ein DIV im Ansichtsfenster sichtbar wird?

Reagieren auf Sichtbarkeitsänderungen eines DIV mit jQuery

jQuery bietet ein robustes Framework für die Behandlung von DOM-Ereignissen, einschließlich Fenstersichtbarkeitsereignissen. In diesem Artikel erfahren Sie, wie Sie bestimmte Aktionen auslösen, wenn ein bestimmtes DIV-Element im Ansichtsfenster sichtbar wird.

Erstellen eines benutzerdefinierten „isvisible“ Event-Handlers

Während jQuery nativ keinen „isvisible“ Event-Handler bereitstellt, können wir mithilfe von Event-Listenern eine benutzerdefinierte Lösung implementieren. So geht's:

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

Erweiterung der .show()-Methode

Alternativ können Sie die vorhandene Methode „.show()“ erweitern, um eine benutzerdefinierte Methode auszulösen „afterShow“-Ereignis, nachdem das Element sichtbar wird. Hier ist ein Codeausschnitt für diesen Ansatz:

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

Das obige ist der detaillierte Inhalt vonWie erkennt man mit jQuery, wann ein DIV im Ansichtsfenster sichtbar wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!