Bagaimana untuk Semak sama ada Elemen Kelihatan dalam Viewport Penyemak Imbas dengan JQuery?

JQuery Semak sama ada Elemen Kelihatan dalam Viewport: Penjelasan Komprehensif

Menentukan sama ada elemen boleh dilihat dalam viewport penyemak imbas ialah tugas biasa dalam pembangunan frontend. JQuery menyediakan cara yang mudah untuk mencapainya dengan bantuan pemalam atau fungsi tersuai.

Menggunakan Pemalam

Pemalam yang kelihatan JQuery menawarkan cara yang mudah untuk menyemak keterlihatan daripada sesuatu unsur. Walau bagaimanapun, anda mungkin menghadapi kesukaran dalam melaksanakannya dengan fungsi yang disediakan. Berikut ialah contoh yang akan berfungsi dengan pemalam yang kelihatan:

$('#element').visible(function() {
  // This function will be executed when the element is visible
});

Membangunkan Fungsi Tersuai

Jika anda memilih untuk tidak menggunakan pemalam, anda boleh membuat tersuai fungsi untuk menyemak keterlihatan:

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

Contoh Penggunaan

Setelah anda menentukan fungsi isInViewport, anda boleh menggunakannya seperti berikut:

$(window).on('resize scroll', function() {
  if ($('#element').isInViewport()) {
    // The element is visible
  } else {
    // The element is not visible
  }
});

Penghadan

Perhatikan bahawa fungsi ini hanya menyemak keterlihatan menegak. Jika anda perlu menentukan keterlihatan mendatar juga, anda boleh melanjutkan fungsi tersebut dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimana untuk Semak sama ada Elemen Kelihatan dalam Viewport Penyemak Imbas dengan JQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!