Bagaimana untuk Mengesan Penghujung Tatal dalam Div Boleh Tatal dengan jQuery?

Mengesan Penghujung Tatal dalam Div Boleh Tatal dengan jQuery

Apabila bekerja dengan kandungan dinamik, anda mungkin menghadapi keperluan untuk memuatkan lebih banyak kandungan sebagai pengguna menatal ke bahagian bawah elemen bekas. jQuery menyediakan cara yang mudah untuk mengesan acara ini untuk div dengan tatal didayakan.

Untuk menentukan bila pengguna telah mencapai bahagian bawah div, anda boleh membandingkan jumlah tatal atas dan dalamTinggi elemen dengan tatalTingginya:

<code class="javascript">if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
  // End of scroll reached
}</code>

Pelaksanaan Kod:

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

Penjelasan:

• scrollTop mengembalikan bilangan piksel elemen telah ditatal secara menegak.
• innerHeight mendapatkan semula ketinggian dalaman elemen, tidak termasuk bar skrol.
• Lebar tatal mewakili jumlah ketinggian kandungan elemen, termasuk kawasan di luar port pandangan.

Apabila jumlah scrollTop dan innerHeight sama dengan scrollHeight, ini menunjukkan bahawa pengguna telah menatal ke bahagian paling bawah div.

Nota Tambahan:

Dalam versi awal jQuery, bind() digunakan untuk melampirkan pengendali acara. Walau bagaimanapun, mengikut dokumentasi, on() ialah kaedah pilihan pada jQuery 1.7.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Penghujung Tatal dalam Div Boleh Tatal dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!