Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengesan Apabila Pengguna Telah Mencapai Bahagian Bawah Div dengan Kandungan Boleh Ubah Menggunakan jQuery?

Bagaimana untuk Mengesan Apabila Pengguna Telah Mencapai Bahagian Bawah Div dengan Kandungan Boleh Ubah Menggunakan jQuery?

Linda Hamilton
Linda Hamiltonasal
2024-10-30 20:00:03357semak imbas

How to Detect When a User Has Reached the Bottom of a Div with Variable Content Using jQuery?

Mengesan Penghujung Tatal Div dengan jQuery

Objektif:
Tentukan apabila pengguna menatal ke bawah daripada elemen div yang ditentukan.

Soalan:
Bagaimanakah saya boleh mengesan apabila pengguna mencapai bahagian bawah div dengan jumlah kandungan yang berubah-ubah dan limpahan ditetapkan kepada auto?

Jawapan:

Untuk mengesan penghujung penatalan div, gunakan sifat/kaedah jQuery berikut:

  • $(). scrollTop(): Mengembalikan jumlah elemen yang telah ditatal secara mendatar atau menegak.
  • $().innerHeight(): Mengembalikan ketinggian dalaman elemen.
  • DOMElement.scrollHeight: Mengembalikan ketinggian kandungan elemen.

Gabungkan dua sifat pertama untuk mendapatkan jumlah ketinggian yang boleh dilihat dan bandingkannya dengan scrollHeight untuk menentukan apabila pengguna telah menatal ke bawah.

<code class="javascript">jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('End of div reached');
        }
    })
});</code>

Nota Tambahan:

  • Kod yang disediakan menggunakan sintaks jQuery 1.7. Untuk versi yang lebih lama, gunakan .bind() dan bukannya .on().
  • Penyelesaian ini akan berfungsi dengan betul walaupun kandungan di dalam div ditambah atau dialih keluar secara dinamik.
  • Laraskan pengendali acara kepada bekas dan tindakan pilihan anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Apabila Pengguna Telah Mencapai Bahagian Bawah Div dengan Kandungan Boleh Ubah 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