Bagaimana untuk Mengesan Apabila DIV Menjadi Kelihatan dalam Viewport dengan jQuery?

Menjawab Perubahan Keterlihatan DIV menggunakan jQuery

jQuery menyediakan rangka kerja yang teguh untuk mengendalikan acara DOM, termasuk acara keterlihatan tetingkap. Dalam artikel ini, kami akan meneroka cara untuk mencetuskan tindakan tertentu apabila elemen DIV tertentu kelihatan dalam port pandangan.

Mencipta Pengendali Acara "tidak kelihatan" Tersuai

Walaupun jQuery tidak menyediakan pengendali acara "tidak kelihatan" secara asli, kami boleh melaksanakan penyelesaian tersuai menggunakan pendengar acara. Begini caranya:

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

Pelanjutan Kaedah .show()

Sebagai alternatif, anda boleh melanjutkan kaedah ".show()" sedia ada untuk mencetuskan tersuai acara "afterShow" selepas elemen kelihatan. Berikut ialah coretan kod untuk pendekatan ini:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Apabila DIV Menjadi Kelihatan dalam Viewport dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!