Kaedah JS untuk menentukan sama ada bar skrol telah menatal ke bahagian bawah halaman dan melaksanakan kemahiran event_javascript

Anda perlu memahami tiga elemen dom, iaitu: clientHeight, offsetHeight dan scrollTop.

clientHeight: Ketinggian elemen ini menduduki ketinggian keseluruhan ruang Oleh itu, jika div mempunyai bar skrol, ketinggian tidak termasuk kandungan di bawah bar skrol yang tidak dipaparkan. Ia hanya ketinggian DIV.

offsetHeight: merujuk kepada ketinggian kandungan elemen. Mengikut perkara di atas, ketinggian ini ialah ketinggian di dalam DIV, termasuk bahagian yang kelihatan dan bahagian yang tidak kelihatan di bawah bar skrol.

scrollTop: Apakah ini? Ia boleh difahami sebagai panjang yang boleh ditatal oleh bar skrol.

Sebagai contoh, jika ketinggian DIV ialah 400px (iaitu, clientHeight ialah 400), dan kandungan di dalamnya ialah senarai panjang, ketinggian kandungan ialah 1000px (iaitu, offsetHeight ialah 1000). Jadi, kita melihat 400px dalam bahagian yang boleh dilihat, dan masih terdapat 600px yang tidak kelihatan dalam kandungan 1000px. Bagi bahagian yang tidak kelihatan ini, kita boleh memaparkan bahagian ini dengan menarik bar skrol. Jika bar skrol tidak ditarik, skrolTop ialah 0 pada masa ini Jika anda menarik bar skrol ke bawah dan bahagian bawah senarai dipaparkan, skrolTop ialah 600. Jadi julat nilai scrollTop ialah [0, 600]. Jadi 600 ini boleh difahami sebagai panjang yang boleh ditatal oleh bar skrol.

Setelah memahami konsep di atas. Sangat mudah untuk menentukan sama ada untuk menatal ke bawah.

Pertama, kami menarik bar skrol dari atas ke bawah. Apa yang berubah ialah nilai scrollTop, dan nilai ini mempunyai julat.
Selang ini ialah: [0, (offsetHeight - clientHeight)]
Iaitu, perubahan dalam keseluruhan proses penarikan bar skrol berada dalam julat 0 hingga (offsetHeight – clientHeight).

1 Tentukan sama ada bar skrol telah menatal ke bawah: scrollTop == (offsetHeight – clientHeight)
2. Dalam 50px dari bahagian bawah bar skrol: (offsetHeight – clientHeight) – scrollTop <= 50
3. Dalam 5% bahagian bawah bar skrol: scrollTop / (offsetHeight – clientHeight) >= 0.95

Sama seperti di atas.

Jika anda ingin menarik ke bawah untuk memuatkan kandungan secara automatik. Hanya daftarkan acara bar skrol:

Salin kod Kod adalah seperti berikut:

scrollBottomTest =function(){
$("#contain").skrol(function(){
        var $this =$(this),
​​​​viewH =$(this).height(),//Ketinggian boleh dilihat
contentH =$(this).get(0).scrollHeight,//Ketinggian kandungan
         scrollTop =$(this).scrollTop();//Ketinggian skrol
//if(contentH - viewH - scrollTop <= 100) { //Apabila mencapai bahagian bawah 100px, muatkan kandungan baharu
If(scrollTop/(contentH -viewH)>=0.95){ //Apabila mencapai bahagian bawah 100px, muatkan kandungan baharu
//Muatkan data di sini..
}
});
}