Bagaimana untuk Semak sama ada Elemen Div Kelihatan dalam Viewport Menggunakan jQuery?

Menyemak Keterlihatan Elemen dalam Viewport Menggunakan jQuery

Dalam senario penyelesaian masalah ini, matlamatnya adalah untuk mengesahkan sama ada elemen div dengan media kelas " " hadir dalam port pandangan kelihatan penyemak imbas, tanpa mengira kedudukan tatal. Pemalam jQuery-visible telah dikenal pasti sebagai penyelesaian yang berpotensi, tetapi pelaksanaannya masih tidak jelas.

Untuk menyelesaikan isu ini, fungsi jQuery tersuai boleh digunakan untuk menentukan keterlihatan elemen dalam viewport:

$.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;
};

Fungsi ini mengira kedudukan elemen berbanding dengan port pandangan dengan mengambil kira sempadan atas dan bawahnya. Dengan membandingkan sempadan ini dengan sempadan viewport, ia menentukan sama ada elemen kelihatan sebahagian atau sepenuhnya.

Untuk melaksanakan ini, masukkan fungsi selepas jQuery dan gunakannya seperti berikut:

$(window).on('resize scroll', function() {
  if ($('#Something').isInViewport()) {
    // Element is visible in viewport
  } else {
    // Element is not visible in viewport
  }
});

Apabila tetingkap diubah saiz atau ditatal, kod ini akan menyemak sama ada elemen dengan ID "Sesuatu" kelihatan. Jika ya, tindakan yang ditentukan akan dilakukan, seperti mencetuskan kesan atau mengemas kini penampilannya.

Adalah penting untuk ambil perhatian bahawa fungsi ini hanya menyemak kedudukan menegak elemen, dengan mengandaikan bahawa penjajaran mendatarnya adalah sesuai . Jika keterlihatan mendatar dan menegak mesti dipertimbangkan, logik tambahan diperlukan untuk mengambil kira lebar elemen dan sempadan mendatar viewport.

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