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

Mengesan Keterlihatan Elemen dalam Viewport Menggunakan jQuery

Soalan:

Bagaimana saya boleh menentukan sama ada elemen tertentu, seperti yang mempunyai kelas "media", berada dalam port pandangan penyemak imbas semasa?

Jawapan:

Untuk memastikan sama ada elemen kelihatan dalam port pandangan, tanpa mengira kedudukan tatal, anda boleh menggunakan fungsi jQuery seperti berikut:

<code class="js">$.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 membandingkan kedudukan atas dan bawah elemen dengan tempat pandang. Jika kedudukan bawah elemen berada di bawah bahagian atas port pandangan dan kedudukan atasnya berada di atas bahagian bawah port pandangan, ia dianggap boleh dilihat.

Untuk memantau perubahan dalam keterlihatan akibat menatal atau mengubah saiz, anda boleh menggunakan pengendali acara berikut:

<code class="js">$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // Perform actions for visible elements
    } else {
        // Perform actions for non-visible elements
    }
});</code>

Sila ambil perhatian bahawa fungsi ini hanya meneliti status sudut pandang menegak elemen; ia tidak mengesahkan sama ada ia melangkaui port pandangan secara mendatar.

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