Heim > Web-Frontend > js-Tutorial > Wie erkennt man mit jQuery, wann ein DIV im Ansichtsfenster sichtbar wird?

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

Linda Hamilton
Freigeben: 2024-10-29 13:26:29
Original
807 Leute haben es durchsucht

How to Detect When a DIV Becomes Visible in the Viewport with jQuery?

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');
    }
  });
});
Nach dem Login kopieren

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]);
    });
  }
});
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage