periksa jQuery jika elemen dilihat

3 Beberapa coretan jQuery untuk memeriksa sama ada elemen dipandang .

Kaedah terbaik yang saya dapati setakat ini ialah plugin JQuery muncul. Berfungsi seperti pesona.

Soalan Lazim (Soalan Lazim) Mengenai JQuery Check Element View

Bagaimana saya boleh menggunakan jQuery untuk memeriksa sama ada elemen berada di viewport?

Untuk memeriksa sama ada elemen berada di viewport menggunakan jQuery, anda boleh menggunakan: pemilih dalam-viewport. Pemilih ini akan mengembalikan semua elemen yang kini dapat dilihat dalam Viewport. Berikut adalah contoh yang mudah:

<span>function isScrolledIntoView(elem)
</span><span>{
</span>    <span>var docViewTop = $(window).scrollTop();
</span>    <span>var docViewBottom = docViewTop + $(window).height();
</span>
    <span>var elemTop = $(elem).offset().top;
</span>    <span>var elemBottom = elemTop + $(elem).height();
</span>
    <span>return ((elemBottom < = docViewBottom) && (elemTop >= docViewTop));
</span><span>}
</span>
<span>isInView: function(elem)
</span><span>{
</span>    <span>var docViewTop = $(window).scrollTop(),
</span>        docViewBottom <span>= docViewTop + $(window).height(),
</span>        elemTop <span>= $(elem).offset().top,
</span>        elemBottom <span>= elemTop + $(elem).height();
</span>    <span>return ((elemBottom < = docViewBottom) && (elemTop >= docViewTop));
</span><span>}</span>

if ($ ("elemen"). Adalah (": in-viewport")) {} else { // elemen tidak dalam viewport

Antara: Terlihat dan: In-Viewport dalam JQuery?

Pemilih yang boleh dilihat dalam jQuery memilih unsur-unsur yang tidak tersembunyi. Ini bermakna bahawa walaupun elemen tidak berada di viewport (iaitu, ia tidak skrin kerana menatal), ia masih akan dipilih oleh: kelihatan jika ia tidak tersembunyi. Ini bermakna bahawa jika elemen di luar skrin disebabkan oleh menatal, ia tidak akan dipilih oleh: in-viewport, walaupun ia tidak tersembunyi. Ia dengan dimensi Viewport. Berikut adalah contoh:

var top_of_element = $ ("#elemen"). Offset (). $ (tetingkap) .scrollTop () $ (tetingkap) .innerHeight ();

if ((bawah_of_screen> top_of_element) && (top_of_screen }
Kod ini memeriksa jika bahagian atas dan bawah elemen berada dalam viewport, dan melakukan tindakan berdasarkan hasilnya.

Bolehkah saya menggunakan jQuery untuk memeriksa sama ada elemen berada di viewport tanpa menggunakan plugin? Berikut adalah contoh mudah:

fungsi isElementInViewPort (el) { var rect = el.getBoundingClientRect (); &&
rect.right );
}
Fungsi ini menggunakan kaedah getBoundingClientRect () Dalam viewport?

Untuk memeriksa sama ada elemen sebahagiannya dalam viewport, anda boleh menggunakan kaedah offset () dalam jQuery untuk mendapatkan kedudukan elemen, dan kemudian bandingkan dengan dimensi viewport. Berikut adalah contoh:

var top_of_element = $ ("#elemen"). Offset (). $ (tetingkap) .scrollTop () $ (tetingkap) .innerheight (); }
Kod ini memeriksa jika bahagian atas atau bawah elemen berada dalam viewport, dan melakukan tindakan berdasarkan hasilnya.

Atas ialah kandungan terperinci periksa jQuery jika elemen dilihat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!