Anda perlu memahami tiga elemen DOM, yaitu: ClientHeight, OffsetHeight, Scrolltop.
ClientHeight: Ketinggian elemen ini menempati ketinggian seluruh ruang. Oleh karena itu, jika div memiliki bilah gulir, ketinggian itu tidak termasuk konten dari bagian berikut yang tidak ditampilkan oleh bilah gulir. Dan itu hanya puncak Div.
OffsetHeight: mengacu pada ketinggian konten elemen. Menurut yang di atas, ketinggian ini adalah ketinggian di dalam div, termasuk bagian yang terlihat dan bagian yang tidak terlihat di bawah bilah gulir.
Scrolltop: Apa ini? Ini dapat dipahami sebagai panjang bilah gulir yang dapat digulir.
Misalnya, jika ketinggian div adalah 400px (mis. ClientHeight adalah 400), dan konten di dalamnya adalah daftar yang sangat panjang, dan tinggi kontennya adalah 1000px (mis. OffsetHeight adalah 1000). Jadi, di bagian yang terlihat, kita melihat bahwa konten 400px dan 1000px masih 600px tidak terlihat. Dan bagian yang tidak terlihat ini adalah apa yang dapat kita tampilkan dengan menarik bilah gulir. Jika scrollbar tidak menarik, scrolltop adalah 0 saat ini. Jika Anda menarik scrollbar ke bawah, bagian bawah daftar akan ditampilkan. Pada saat ini, scrolltop adalah 600. Oleh karena itu, interval nilai scrolltop adalah [0, 600]. Jadi 600 ini dapat dipahami sebagai panjang bilah gulir yang dapat digulir.
Setelah memahami konsep di atas. Sangat mudah untuk mengetahui apakah itu menggulir ke bawah.
Pertama, kami menarik scrollbar, menarik dari atas ke bawah, dan perubahannya adalah nilai scrolltop, dan nilai ini memiliki interval.
Interval ini adalah: [0, (OffsetHeight - ClientHeight)]
Artinya, seluruh proses gulir menarik perubahan dalam kisaran 0 hingga (OffsetHeight ClientHeight).
1. Penilaian Gulir scrollbar ke bawah: scrolltop == (OffsetHeight clientHeight)
2. Dalam 50px dari ujung bawah bilah gulir: (OffsetHeight ClientHeight) Scrolltop <= 50
3. Dalam 5% dari jarak batang gulir dari bawah: scrolltop / (offsetheight clientheight)> = 0,95
Seperti di atas.
Jika Anda ingin menarik ke bawah, secara otomatis memuat konten. Cukup daftarkan acara scrollbar:
Salinan kode adalah sebagai berikut:
scrollbottomtest = function () {
$ ("#contil"). scroll (function () {
var $ this = $ (ini),
viewh = $ (ini) .height (), // ketinggian yang terlihat
contentH = $ (this) .get (0) .scrollHeight, // Tinggi konten
scrolltop = $ (ini) .scrolltop (); // tinggi gulir
// if (contenth - viewh - scrolltop <= 100) {// Saat mencapai 100px bawah, muat konten baru
if (scrolltop/(contenth -viewh)> = 0.95) {// Saat mencapai 100px bawah, muat konten baru
// Muat data di sini ..
}
});
}
PS: Di sini saya merekomendasikan alat kueri online tentang acara JS, yang merangkum jenis acara yang umum digunakan dan fungsi fungsi JS:
Daftar lengkap acara dan fungsi JavaScript:
http://tools.vevb.com/table/javascript_event