Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengesan Apabila Pengguna Tatal ke Bahagian Bawah Div dalam jQuery?

Bagaimana untuk Mengesan Apabila Pengguna Tatal ke Bahagian Bawah Div dalam jQuery?

Barbara Streisand
Barbara Streisandasal
2024-10-30 02:16:29758semak imbas

How to Detect When a User Scrolls to the Bottom of a Div in jQuery?

Cara Mengesan Apabila Pengguna Tatal ke Bawah Div dengan jQuery

Anda telah mencipta elemen div dengan kandungan dinamik yang menampilkan " tetapan limpahan auto". Untuk meningkatkan pengalaman pengguna, anda ingin memuatkan kandungan tambahan apabila pengguna menatal ke bahagian bawah kotak div ini. Walau bagaimanapun, anda tidak pasti cara untuk mengesan peristiwa tertentu itu.

Kunci kepada pengesanan ini terletak pada menggunakan sifat dan kaedah jQuery tertentu:

  • $().scrollTop(): Menunjukkan bilangan piksel elemen telah ditatal
  • $().innerHeight(): Mewakili ketinggian dalaman elemen
  • DOMElement.scrollHeight: Mengembalikan ketinggian kandungan elemen

Untuk menentukan bila pengguna telah mencapai bahagian bawah div, anda boleh membandingkan jumlah dua sifat pertama dengan sifat ketiga. Apabila nilai ini sepadan, penghujung div telah dicapai.

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

Penyelesaian ini menggunakan kaedah on(), yang lebih disukai untuk pengendalian acara dalam jQuery versi 1.7 .

Nota Tambahan:

  • Pendengar acara dilampirkan pada div dengan ID #flux, yang mewakili elemen yang anda berminat untuk memantau.
  • Amaran () fungsi digunakan untuk tujuan demonstrasi. Anda boleh memasukkan logik anda sendiri untuk memuatkan kandungan tambahan di sini.
  • Contoh langsung boleh didapati di http://jsfiddle.net/doktormolle/w7X9N/.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Apabila Pengguna Tatal ke Bahagian Bawah Div dalam 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