Bagaimanakah Saya Boleh Menentukan jika Elemen Kelihatan Selepas Menatal?

Memastikan Keterlihatan Elemen Selepas Menatal

Mengenal pasti Elemen Tersembunyi Tatal

Apabila memuatkan kandungan secara dinamik melalui AJAX, sesetengah elemen mungkin kekal tersembunyi melainkan penatalan dilakukan . Menentukan keterlihatan mereka dalam bahagian halaman yang boleh dilihat pada masa ini menjadi penting.

Penyelesaian

Untuk menyemak sama ada elemen kelihatan sepenuhnya atau sebahagiannya selepas menatal, gunakan fungsi berikut:

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

Fungsi Utiliti Lanjutan

Perkenalkan fungsi utiliti yang menyokong kedua-dua penuh dan semakan keterlihatan separa:

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

Penggunaan Dipertingkat

Tingkatkan kod dengan fungsi utiliti ini:

var Utils = new Utils();

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
  console.log('in view');
} else {
  console.log('out of view');
}

Dengan melaksanakan fungsi ini, anda boleh mengesan keterlihatan elemen dengan berkesan selepas menatal dan membalas dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menentukan jika Elemen Kelihatan Selepas Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!