Bagaimana untuk menentukan sama ada elemen berada dalam kawasan paparan dalam jquery

Apabila membangunkan halaman web, kita sering perlu memanipulasi elemen DOM. Untuk mengendalikan elemen, anda perlu terlebih dahulu menentukan sama ada elemen itu berada dalam kawasan paparan. Dalam halaman web, banyak elemen mungkin tersembunyi dan bukan dalam kawasan paparan Oleh itu, sebelum mengendalikan elemen ini, anda perlu menentukan sama ada ia berada dalam kawasan paparan untuk mengelakkan mengendalikan elemen yang tidak perlu dan meningkatkan prestasi halaman.

jQuery menyediakan beberapa kaedah untuk menentukan sama ada elemen berada dalam kawasan paparan. Di bawah ini kami akan memperkenalkan kaedah ini secara terperinci, termasuk kaedah penghakiman berdasarkan paparan, dokumen dan elemen.

Kaedah penghakiman berasaskan viewport

Dalam halaman web, kita boleh menggunakan viewport untuk menilai sama ada elemen berada dalam kawasan paparan. Port pandangan ialah kawasan halaman yang kini boleh dilihat oleh pengguna, yang boleh diperolehi melalui sifat objek tetingkap.

jQuery menyediakan beberapa kaedah untuk menentukan sama ada sesuatu elemen berada dalam viewport, termasuk:

1. $(window).height(): Dapatkan ketinggian viewport semasa.
2. $(window).scrollTop(): Mendapat jarak antara bahagian atas port pandangan semasa dan bahagian atas dokumen (iaitu jarak tatal bar skrol).

Melalui dua kaedah di atas, kita boleh mendapatkan kedudukan atas dan bawah port pandang semasa. Untuk elemen, jika kedudukan atasnya kurang daripada kedudukan bawah port pandangan semasa dan kedudukan bawahnya lebih besar daripada kedudukan atas port pandang semasa, maka ia berada dalam kawasan paparan.

Berdasarkan prinsip di atas, kita boleh menggunakan kod untuk melaksanakan fungsi menentukan sama ada elemen berada dalam viewport:

function isInViewport(elem) {
    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elemTop < viewportBottom && elemBottom > viewportTop;
}

// 使用方式
var element = $('#my-element');
if (isInViewport(element)) {
    // 元素在视口内
} else {
    // 元素不在视口内
}

Dalam kod di atas, fungsi isInViewport() menerima objek elemen jQuery dan mendapatkan Kedudukan elemen pada halaman dan kedudukan port pandang semasa, tentukan sama ada elemen berada dalam kawasan paparan dan kembalikan nilai Boolean.

Kaedah penghakiman berasaskan dokumen

Apabila kandungan halaman melebihi saiz viewport, saiz viewport tidak lagi menggambarkan kandungan halaman dengan tepat Pada masa ini, adalah perlu untuk menilai sama ada elemen berada di kawasan paparan berdasarkan dokumen Di dalam. Kaedah penghakiman berasaskan dokumen perlu mendapatkan jarak elemen berbanding bahagian atas dokumen dan ketinggian dokumen untuk menentukan sama ada elemen berada dalam kawasan yang boleh dilihat dokumen.

jQuery menyediakan kaedah berikut untuk mendapatkan kedudukan elemen dalam dokumen dan ketinggian dokumen:

1. $(document).height(): Dapatkan ketinggian dokumen itu.
2. elem.offset().top: Mendapat jarak elemen berbanding bahagian atas dokumen.

Menggunakan dua kaedah di atas, kita boleh mendapatkan kedudukan teratas elemen dan ketinggian dokumen untuk menentukan sama ada elemen itu berada dalam kawasan kelihatan dokumen. Berikut ialah fungsi yang menentukan sama ada elemen berada dalam kawasan kelihatan dokumen:

function isElementInDocumentViewport(elem) {
    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var docHeight = $(document).height();
    return elemTop < docViewBottom && elemBottom > docViewTop && elemTop > 0 && elemBottom < docHeight;
}

// 使用方式
var element = $(&#39;#my-element&#39;);
if (isElementInDocumentViewport(element)) {
    // 元素在可视区域内
} else {
    // 元素不在可视区域内
}

Dalam kod di atas, fungsi isElementInDocumentViewport() menentukan sama ada elemen berada dalam kawasan yang boleh dilihat dokumen, dan fungsi mengembalikan nilai Boolean. elemTop dan elemBottom masing-masing mewakili jarak antara bahagian atas dan bawah elemen berbanding bahagian atas dokumen, docViewTop dan docViewBottom masing-masing mewakili jarak antara bahagian atas dan bawah dokumen berbanding bahagian atas viewport, dan docHeight mewakili ketinggian dokumen.

Kaedah penghakiman berasaskan elemen

Kadangkala, apabila menilai sama ada elemen berada dalam kawasan paparan, kami hanya mengambil berat tentang situasi dalam elemen induk tertentu. Pada masa ini, kita boleh menggunakan kaedah penghakiman berasaskan elemen untuk mendapatkan ketinggian elemen induk dan kedudukan bar skrol untuk menentukan sama ada elemen tersebut berada dalam kawasan yang boleh dilihat bagi elemen induk.

Berikut ialah fungsi yang menentukan sama ada elemen berada dalam kawasan kelihatan elemen induk:

function isElementInElementViewport(elem, parentElem) {
    var elemTop = elem.offset().top - parentElem.offset().top;
    var elemBottom = elemTop + elem.height();
    var parentViewTop = parentElem.scrollTop();
    var parentViewBottom = parentViewTop + parentElem.height();
    var parentHeight = parentElem.height();
    return elemTop < parentViewBottom && elemBottom > parentViewTop && elemTop > 0 && elemBottom < parentHeight;
}

// 使用方式
var element = $('#my-element');
var parentElement = $('#my-parent-element');
if (isElementInElementViewport(element, parentElement)) {
    // 元素在父元素可视区域内
} else {
    // 元素不在父元素可视区域内
}

Dalam kod di atas, fungsi isElementInElementViewport() menerima dua jQuery objek elemen, masing-masing Elemen yang akan dinilai dan elemen induknya. Fungsi ini mengembalikan nilai Boolean. elemTop dan elemBottom masing-masing mewakili jarak antara bahagian atas dan bawah elemen berbanding bahagian atas elemen induk parentViewTop dan parentViewBottom masing-masing mewakili jarak antara bahagian atas dan bawah elemen induk berbanding bahagian atas bar skrol mewakili ketinggian unsur induk.

Kesimpulan

Dalam pembangunan web, menilai sama ada elemen berada dalam kawasan paparan adalah fungsi asas dan penting. Apabila menggunakan jQuery untuk mengendalikan elemen DOM, kita boleh menggunakan kaedah yang disediakan oleh jQuery untuk menentukan sama ada elemen itu berada dalam kawasan yang boleh dilihat pada viewport, dokumen atau elemen induk. Dengan menggunakan kaedah ini secara rasional, kami boleh meningkatkan prestasi halaman dan mengelakkan operasi yang tidak perlu.

Atas ialah kandungan terperinci Bagaimana untuk menentukan sama ada elemen berada dalam kawasan paparan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!