Rumah  >  Artikel  >  hujung hadapan web  >  ## Bagaimana untuk Semak sama ada Elemen Kelihatan dalam Viewport Menggunakan jQuery?

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

Patricia Arquette
Patricia Arquetteasal
2024-10-25 06:29:291001semak imbas

## How to Check if an Element is Visible in the Viewport Using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn