Rumah > hujung hadapan web > tutorial js > 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
Lepaskan: 2024-10-30 20:00:03
asal
452 orang telah melayarinya

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan