Jquery: Tentukan Keterlihatan Elemen dalam Viewport
Dalam masalah biasa ini, pengguna sering mencari kaedah untuk memastikan sama ada elemen kelihatan dalam port pandangan pelayar. Untuk menangani perkara ini, perbincangan ini akan meneroka penyelesaian menggunakan fungsi jQuery.
Menentukan Keterlihatan Elemen
Untuk menentukan sama ada elemen boleh dilihat dalam viewport, kita boleh menentukan fungsi jQuery:
<code class="javascript">$.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; };</code>
Fungsi ini mengira koordinat atas dan bawah elemen dan ruang pandang. Dengan membandingkan nilai ini, ia menentukan sama ada elemen berada dalam bahagian dalam port pandang.
Penggunaan
Untuk menggunakan fungsi ini, anda boleh memasukkan kod berikut dalam skrip anda:
<code class="javascript">$(window).on('resize scroll', function() { if ($('#Something').isInViewport()) { // Do something when the element is in viewport } else { // Do something when the element is out of viewport } });</code>
Pengendali acara ini menyemak tatal dan mengubah saiz acara untuk terus memantau keterlihatan elemen dengan ID "Sesuatu."
Pertimbangan
Pendekatan ini hanya menyemak kedudukan menegak elemen. Untuk keterlihatan mendatar, anda perlu melaksanakan logik tambahan atau menggunakan pustaka pihak ketiga yang mengendalikan kedua-dua kedudukan mendatar dan menegak.
Atas ialah kandungan terperinci Berikut ialah beberapa tajuk gaya soalan berdasarkan artikel anda: * **Cara Menyemak sama ada Elemen Kelihatan dalam Viewport dengan jQuery** * **jQuery: Menentukan Keterlihatan Elemen Dalam Jendela Penyemak Imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!